JSFiddle - React, Tailwind, and code Playground

HTML

<input id="searchbox" name="term" type="search" value="">

CSS

h1 { font-size: 20pt; color:Navy; }
    h2 { font-size: 18pt; font-weight:bold; color: #DDD; }

    body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
    body { margin:0; padding:0; height:100%;}

    .ui-widget { font-size: 0.8em; line-height:0.6em; }
    .ui-widget .ui-widget { font-size: 0.7em; }

    div.inputDiv  {
         float: left;
         width: 42%;
         height: 400px;
         min-height: 100%;
         border: Navy 1px dotted;
         margin: 14px;
         padding: 10px;
    }

JavaScript

function monkeyPatchAutocomplete() {

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    var matchstring = [];
    $.each(this.term.split(""), function(index, c){         
         matchstring.push("^"+c+"|\\b"+c);
    });
    var output = item.label.replace(new RegExp("(" + matchstring.join("|") + ")", "gi"), '<strong>$1</strong>');

    return $("<li>")
        .append($("<a>").html(output))
        .appendTo(ul);
};
}

var wordlist = ["Green College", "Garbage Collection", "Agro Cool", "GC", "Coca Cola"
      ];

$(document).ready(function () {
    monkeyPatchAutocomplete();
    $("#searchbox").autocomplete({source: function( request, response ) {
    response(wordlist);
  }});
});