Databases
StackOverflow2013
Postsdbo
POjQuery UI Autocomplete Category How to Skip Category Headers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI Autocomplete Category How to Skip Category Headers
    text
    copied!<p>I've got a working autocomplete field in my web application and I'm looking for a way to increase the usability of the field by somehow automatically skipping the category fields when an arrow key is used to scroll down the available choices (after typing in a partial search term). <br><br> For example, if a user starts typing "an", the autocomplete will show two categories with items in each. The user wants to select one of the items in the list under "People". They use the arrow key to move down the list. Currently, this code inserts the categories in the results as a list item. When using the arrow keys, you must move passed them in order to highlight and select a result. Any way the application could automatically skip those category headers?</p> <pre><code>$.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var self = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "&lt;li class='ui-menu-item ui-category'&gt;" + item.category + "&lt;/li&gt;" ); currentCategory = item.category; } self._renderItem( ul, item ); }); } }); 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" } ]; $( "#textfield" ).catcomplete({ source: data, select: function(event, ui) { window.location.hash = "id_"+escape(ui.item.id); } }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload