JSFiddle - React, Tailwind, and code Playground

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,
        

       

    }

    );

});

//asifrc's code
$("#checkValue").on('focus', function () {
    $("#checkValue").catcomplete("search");
});