JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<label for="search">Search:</label>
<input id="search">

CSS

.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
  }

.ui-helper-hidden-accessible { display: none;}

JavaScript

$(function () {
 $.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
      var that = this,
        currentCategory = "";
      $.each( items, function( index, item ) {
        if ( item.category != currentCategory ) {
          ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
          currentCategory = item.category;
        }
        that._renderItemData( ul, item );
      });
    }
  });
     var data = [{
         label: "Belconnen",
         category: "Australia"
     }, {
         label: "Castle Hill",
         category: "Australia"
     }, {
         label: "Manly",
         category: "Australia"
     }, {
         label: "Newtown",
         category: "Australia"
     },{
         label: "Boston",
         category: "USA"
     }, {
         label: "New York",
         category: "USA"
     }, {
         label: "Philadelphia",
         category: "USA"
     }, {
         label: "Solamachi",
         category: "Japan"
     },{
         label: "Netanya",
         category: "Israel"
     }, {
         label: "Tel Aviv",
         category: "Israel"
     }];

     $("#search").catcomplete({
         delay: 0,
         source: data
     });
 });