JSFiddle - React, Tailwind, and code Playground

by asifrc

HTML

<input type="text" maxlength="100" id="checkValue" />

JavaScript

$.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);

        });
    }


});


$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    var re = new RegExp(this.term, "i");
    var t = item.label.replace(re, "<span style='font-weight:bold;color:#3366cc;'>" + this.term + "</span>");
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + t + "</a>")
        .appendTo(ul);
};

$(function () {

    var data = [{
        label: "local - 1",
        category: "local"
    }, {
        label: "local - 2",
        category: "local"
    }, {
        label: "local - 3",
        category: "local"
    }, {
        label: "local - 4",
        category: "local"
    }, {
        label: "local - 5",
        category: "local"
    }, {
        label: "international - 1",
        category: "international"
    }, {
        label: "international - 2",
        category: "international"
    }, {
        label: "international - 3",
        category: "international"
    }, {
        label: "international - 4",
        category: "international"
    }, {
        label: "international - 5",
        category: "international"
    }];

    $("#checkValue").catcomplete({
        source: data,
        minLength: 0,

        open: function (event, ui) {
            $(".ui-autocomplete").mCustomScrollbar({
                scrollButtons: {
                    enable: true,
                    scrollInertia: 600,
                    autoDraggerLength: false
                }
            });

            $(".ui-autocomplete").autocomplete("enable");
        }

  ...