UI AUTOCOMPLETE - CUSTOM HTML Categorization of Suggestions
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.9/jquery-ui.js"></script>
<input id="typeAhead" />
JavaScript
$(document).ready(function() {
$.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: "Antigen"},
{
label: "andreas",
category: "Antigen"},
{
label: "antal",
category: "Antigen"},
{
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"}
];
$("#typeAhead").catcomplete({
delay: 0,
source: data,
}).data("catcomplete")._renderItem = function(ul, item) {
return $("<li></li>").data("item.autocomplete", item).append($("<a class='ui-menu-item'></a>").text(item.label)).appendTo(ul);
};
});