JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="username" />

JavaScript

var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    ];
$("#username").autocomplete({
    source: availableTags,
    autoFocus: true,
    autoSelect: true
});
$("#username").live("blur", function(event) {
    var autocomplete = $(this).data("autocomplete");
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + ".*$", "i");
    var myInput = $(this);
    autocomplete.widget().children(".ui-menu-item").each(function() {
        //Check if each autocomplete item is a case-insensitive match on the input
        var item = $(this).data("item.autocomplete");
        if (matcher.test(item.label || item)) {
            //There was a match, lets stop checking
            autocomplete.selectedItem = item;
            return;
        }
    });
    //if there was a match trigger the select event on that match
    //I would recommend matching the label to the input in the select event
    if (autocomplete.selectedItem) {
        autocomplete._trigger("select", event, {
            item: autocomplete.selectedItem
        });
        $(this).val(autocomplete.selectedItem.label);
    //there was no match, clear the input
    }
    else {
        $(this).val('');
    }
});