JSFiddle - React, Tailwind, and code Playground

by pomeh

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">
<div class="demo">
    <label for="search">Search: </label>
    <input id="search" />
</div>

<p>A categorized search result. Try typing "a" or "n".</p>

CSS

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

JavaScript

// test case for http://stackoverflow.com/questions/10278672/jquery-autocomplete-query
$.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);
        });
    }
});


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
});