JSFiddle - React, Tailwind, and code Playground
HTML
Search for "a" as in "ASP": <input id="tags" />
JavaScript
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"];
$("#tags").autocomplete({
source: availableTags,
response: function (event, ui) {
if (ui.content.length > 3) {
while (ui.content.length > 3) {
ui.content.pop();
}
ui.content.push({
'label': 'Please narrow down your search',
'value': ''
});
}
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
var $el = $("<li>");
if (item.value === '') {
$el.addClass("ui-state-disabled")
.text(item.label);
} else {
$el.append("<a>" + item.label + "</a>");
}
return $el.appendTo(ul);
};
});