JSFiddle - React, Tailwind, and code Playground

by chrisk

HTML

<label for="search">Search: </label>
<input id="search" />
<label for="searchval">Search Value: </label>
<input id="searchval" />

CSS

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

JavaScript

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            currentCategory = "";
        $.each(items, function(index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    }
});
$(function() {
    var data = [
        {
        label: "anders",
        value: "1",
        category: ""},
    {
        label: "andreas",
        value: "2",
        category: ""},
    {
        label: "antal",
        value: "3",
        category: ""},
    {
        label: "annhhx10",
        value: "4",
        category: "Products"},
    {
        label: "annk K12",
        value: "5",
        category: "Products"},
    {
        label: "annttop C13",
        value: "6",
        category: "Products"},
    {
        label: "anders andersson",
        value: "7",
        category: "People"},
    {
        label: "andreas andersson",
        value: "8",
        category: "People"},
    {
        label: "andreas johnson",
        value: "9",
        category: "People"}
    ];

    $("#search").catcomplete({
        delay: 0,
        source: data,
        select: function(event, ui) {
            $('#search').val(ui.item.label);
            $('#searchval').val(ui.item.value);
        }

    });
});