jQuery & jQueryUI Base

by andrewwhitaker

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.7/jquery-ui.min.js"></script>
<input type="text" id="search" />

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-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    }
});

$(function() {
    var data = [
        {
        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({
        source: data,
        select: function(event, ui) {
            window.location.hash = "id_" + escape(ui.item.id);
        }
    });
});