Documentation for catcomplete

Question

I was just trying to find documentation for catcomplete. I need a guide to use _renderItem. I found this http://jqueryui.com/autocomplete/#categories , but there seems to be no mention of this just as an example for _renderMenu

_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 ); }); } 

Answer 1

catcomplete is just an example and, unfortunately, is not part of the jQuery user interface, so there is no documentation for _renderItem or renderMenu . Think of it as part of jQuery source code. However, the effect can be easily reproduced from the source code.

To use catcomplete, we just need to make sure that both label and category values ​​are passed to catcomplete , as shown:

 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" } ]; 

Items with an empty string as a category will not be placed in the category and left as with standard autocomplete. Those who are given a category will have submenus under that category.

Here's the script (jQuery example)

---

To add a class to each element, you can simply add .addClass(item.category) to the end of the last line of code in the catcomplete widget:

 that._renderItemData( ul, item ).addClass(item.category); 

updated fiddle here