JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/black-tie/jquery-ui.css">
<input id="s" type="text" />
JavaScript
var completeResults = [{
value: "S4 iv",
label: "Samsung Galaxy S4",
image: "samsung_galaxy_s_iv_1.jpg"
}, {
value: "stackoverflow",
label: "Nokia lumia 920",
image: "nokia_lumia_920_1.jpg"
}];
function custom_source(request, response) {
// Create an array of regular expressions from the user's input:
var terms = $.map(request.term.split(' '), function (term) {
// Ignore just whitespace:
if ($.trim(term)) {
return new RegExp($.ui.autocomplete.escapeRegex(term), 'i');
}
});
response($.grep(completeResults, function (value) {
var found = true
, i
, regex;
// For every result, iterate over every term we extracted earlier and make sure it matches:
for (i = 0; i < terms.length && found; i++) {
regex = terms[i];
found = found && (regex.test(value.value) || regex.test(value.label));
}
return found;
}));
}
$(function () {
$("#s").autocomplete({
source: custom_source,
minLength: 0
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var inner_html = "<a><img src='../img/type/120x200/" +
item.image + "' width='21' height='35'/><span class='title'>" +
item.label + "</span></a>";
return $("<li></li>")
.data("item.autocomplete", item)
.append(inner_html)
.appendTo(ul);
};
});