Question

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).

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?

$.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-menu-item ui-category'>" + item.category + "</li>" );
                    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);
        }
    });

Answer 1

This line:

ul.append( "<li class='ui-menu-item ui-category'>" + item.category + "</li>" );

is causing the problem.

Internally, the widget uses list items with a class ui-menu-item to distinguish whether or not an li is an actual menu item that can be selected. When you press the ‘down’ key, the widget finds the next item with a class ui-menu-item and moves to it.

Remove the class and your code works like you want it to:

ul.append( "<li class='ui-category'>" + item.category + "</li>" );

Here it is working:

http://jsfiddle.net/andrewwhitaker/pkFCF/