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({
        autoFocus: true,
        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': ''
                });
            }
        },
        focus: function(event, ui){
            var curr = $(event.currentTarget).find('a.ui-state-focus');
            if(curr.parent().hasClass('ui-state-disabled'))
            {
                event.preventDefault();                                  curr.parent().siblings().first().children('a').mouseenter();  
            }
        }
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li " + (item.value == '' ? 'class="ui-state-disabled"' : '') + ">")
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
    };
});