JSFiddle - React, Tailwind, and code Playground
HTML
<input id="typeahead" type="text" />
<ul id="list"></ul>
CSS
.highlight {
font-weight: bold;
text-decoration: underline;
font-style: italic;
}
JavaScript
$(document).ready(function() {
$('#typeahead').on({
input: function() {
$('#list li').remove();
$.ajax({
url: 'http://smpl-php.com/jquery/test/northwind.php',
method: 'post',
data: { 'name': $('#typeahead').val() },
dataType: 'json',
success: function(response) {
$(response).each(function(i, e) {
var match = e.name
.split($('#typeahead').val())
.join('<span class="highlight">'+ $('#typeahead').val() +'</span>');
$('#list').append('<li class="employeeID-'+ e.id +'">'+ match +'</li>');
});
},
error: function(error) {}
});
}
});
});