JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>
<div class="demo">
    <label for="search">Search: </label>
    <input id="search" />
</div><!-- End demo -->

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,
            categories = { };
        
        /* Build a dictionary/hash where keys are categories and values are 
         * arrays of items with that category 
         */
        $.each(items, function (index, item) {
            if (!categories.hasOwnProperty(item.category)) {
                 categories[item.category] = [item];
            } else {
                categories[item.category] = categories[item.category].concat([item]);
            }
        });
        
        /* Iterate over the hash we just built and display a category followed by its
         * items.
         */
        $.each(categories, function(category, items) {
            if (category) {
                ul.append("<li class='ui-autocomplete-category'>" + category + " (" + items.length + ")</li>");
            }
            $.each(items, function (index, item) {
                self._renderItem(ul, item);
            });
        });
    }
});

$(function() {
    var data = [{
        label: "anders",
        category: ""},
    {
        label: "andreas",
        category: ""},
    {
        label: "antal",
        category: ""},
    {
        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").catcomplete({
        delay: 0,
        source: data
    });
});