JSFiddle - React, Tailwind, and code Playground

by Manoj kumar Lakshman

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<label for="search">Search:</label>
<input id="search">

CSS

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}
/* IE 6 doesn't support max-height
			 * we use height instead, but this forces the menu to always be this tall
			 */
 * html .ui-autocomplete {
    height: 100px;
}
.ui-autocomplete .highlight {
    text-decoration: underline;
}
.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
}
.ui-autocomplete .ui-autocomplete-category:focus{
   font-weight: normal;
}

JavaScript

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _create: function () {
        this._super();
        this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
    },
    _renderMenu: function (ul, items) {
        var that = this,
            currentCategory = "";
        $.each(items, function (index, item) {
            var li;
            if (item.category != currentCategory) {
                 ul.append("<li class='ui-autocomplete-category ui-menu-item'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            li = that._renderItemData(ul, item);
            if (item.category) {
                li.attr("aria-label", item.category + " : " + item.label);
            }
        });
    }
});

$(function () {
    var data = [{
        label: "anders",
        category: ""
    }, {
        label: "andreas",
        category: ""
    }, {
        label: "antal",
        category: ""
    }, {
        label: "annhhx10",
        category: "Products",
        value: "Products"
    }, {
        label: "annk K12",
        category: "Products",
        value: "Products"
    }, {
        label: "annttop C13",
        category: "Products",
        value: "Products"
    }, {
        label: "anders andersson",
        category: "People",
        value: "People"
    }, {
        label: "andreas andersson",
        category: "People",
        value: "People"
    }, {
        label: "andreas johnson",
        category: "People",
        value: "People"
    }];

    $("#search").catcomplete({
        delay: 0,
        source: data,
        select: function (event, ui) {
            selectHandler(ui.item.value);
        }
    });
    
    //Not the best solution but will solve the problem
    $(document).on('click','.ui-autocomplete-category',function(){
         $("#search").val($(this).html());
         $("#search").catcomplete( "close" );
        selectHandler($(this).html());
    });
    
   ...