JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<div><input type="text" name="search" id="search_input"  /></div>

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 search-dropdown-category'>" + item.category + "</li>");
                    currentCategory = item.category;
                }
                self._renderItem(ul, item);
            });
        }
    });
$(document).ready(function() {
    var data = [
        {
        label: "anders",
        category: "aa"},
    {
        label: "andreas",
        category: "aa"},
    {
        label: "antal",
        category: "aa"},
    {
        label: "annhhx10",
        category: "Products"},
    {
        label: "annk K12",
        category: "Products"},
    {
        label: "annttop C13",
        category: "Products"},
    {
        label: "anders andersson",
        category: "People"},
    {
        label: "andreas andersson",
        category: "People"},
    {
        label: "andreas johnson",
        category: "People"}
    ];
    
    $("#search_input").catcomplete({
        source: data,
        select: function(event, ui) {
            alert(ui.item.label);
        }
    });

    
});