JQuery UI Autocomplete categories with counting engine

Question

I implement jQuery UI autocomplete based on the example categories in the documentation. I would like to add the number of results to the "Categories" heading, so instead of displaying "Products" it displays "Products (3)". I know that the _renderMenu function needs to be changed from the example, but it's hard for me to understand how it can be changed. Any help that started me on the right path would be greatly appreciated.

Here is sample code from jQuery UI Autocomplete Categories demo:

<script> $.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 ); }); } }); </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> <div class="demo"> <label for="search">Search: </label> <input id="search" /> </div> 

Answer 1

One good strategy would be to create an object / hash that stores categories as keys and arrays of elements corresponding to that category as values. In other words, you want to create something like this:

 { "Products": ["annhhx10", "annk K12", /*etc*/], "People": ["anders andersson", "andreas andersson", /*etc*/] } 

Once you build this, you can iterate over it and display each category followed by its values. The advantage of this is that all you have to do to get the number of elements is the length of the array corresponding to the current category. Something like:

 $.widget("custom.catcomplete", $.ui.autocomplete, { _renderMenu: function(ul, items) { var self = this, categories = { }; /* Build a dictionary/hash where keys are categories and values are * arrays of items with that category */ $.each(items, function (index, item) { if (!categories.hasOwnProperty(item.category)) { categories[item.category] = [item]; } else { categories[item.category].push(item); } }); /* Iterate over the hash we just built and display a category followed by its * items. */ $.each(categories, function(category, items) { if (category) { ul.append("<li class='ui-autocomplete-category'>" + category + " (" + items.length + ")</li>"); } $.each(items, function (index, item) { self._renderItem(ul, item); }); }); } }); 

Example: http://jsfiddle.net/andrewwhitaker/vNtGd/

Answer 2

 $.widget("custom.catcomplete", $.ui.autocomplete, { _renderMenu: function (ul, items) { var self = this, currentCategory = "", itemCount = 0, itemsLength = items.length - 1; $.each(items, function (index, item) { if (item.category != currentCategory) { ul.find('.ui-autocomplete-category:last').text(function () { return $(this).text() + ' ' + itemCount }); ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); currentCategory = item.category; itemCount = 1; } else { itemCount++; } if (index === itemsLength) { ul.find('.ui-autocomplete-category:last').text(function () { return $(this).text() + ' ' + itemCount }); } self._renderItem(ul, item); }); } });