5 <title>jQuery UI Autocomplete - Categories</title>
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7 <script src="../../jquery-1.9.1.js"></script>
8 <script src="../../ui/jquery.ui.core.js"></script>
9 <script src="../../ui/jquery.ui.widget.js"></script>
10 <script src="../../ui/jquery.ui.position.js"></script>
11 <script src="../../ui/jquery.ui.menu.js"></script>
12 <script src="../../ui/jquery.ui.autocomplete.js"></script>
13 <link rel="stylesheet" href="../demos.css">
15 .ui-autocomplete-category {
23 $.widget( "custom.catcomplete", $.ui.autocomplete, {
24 _renderMenu: function( ul, items ) {
27 $.each( items, function( index, item ) {
28 if ( item.category != currentCategory ) {
29 ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
30 currentCategory = item.category;
32 that._renderItemData( ul, item );
40 { label: "anders", category: "" },
41 { label: "andreas", category: "" },
42 { label: "antal", category: "" },
43 { label: "annhhx10", category: "Products" },
44 { label: "annk K12", category: "Products" },
45 { label: "annttop C13", category: "Products" },
46 { label: "anders andersson", category: "People" },
47 { label: "andreas andersson", category: "People" },
48 { label: "andreas johnson", category: "People" }
51 $( "#search" ).catcomplete({
60 <label for="search">Search: </label>
63 <div class="demo-description">
64 <p>A categorized search result. Try typing "a" or "n".</p>