jQuery UI & Autocomplete: Categories

This entry is part 5 of 7 in the series jQuery UI Autocomplete

jQuery UI Autocomplete – Categories

A categorized search result. Try typing “a” or “n”.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Autocomplete - Categories</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        .ui-autocomplete-category {
            font-weight: bold;
            padding: .2em .4em;
            margin: .8em 0 .2em;
            line-height: 1.5;
        }
    </style>
    <script>
        $.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);
                });
            }
        });
    </script>
    <script>
        $(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
            });
        });
    </script>
</head>
<body>

<label for='search'>Search: </label>
<input id='search'>

</body>
</html>
Try The Code
Series Navigation<< jQuery UI & Autocomplete: Combo box
jQuery UI & Autocomplete: Multiple entries with values >>