jQuery autocomplete don't select item

Question

In option "source" I get with ajax the results + 1 custom note text with info about possible results. Like: "Show 2 of 3456 results". Its only a info for the user.

For the last entry in the -ul- list, I would not have processed the following events: keyup,keydown,pageup and pagedown.

For this, I have in option "open" set this:

open: function(event, ui) {
$("ul.ui-autocomplete.ui-menu li:last").removeClass("ui-menu-item").removeAttr("role").html('Show 2 of 3456 results');
},

HTML now look like this:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 39px; left: 79px; display: block; width: 273px;">
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Result 1</a>
</li>
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Result 2</a>
</li>
<li class="">Show 2 of 3456 results</li>
</ul>

This works if it at least gives minimum one real result, not only the last note text.

But what if no result is available and only the note text(last item) "No Results", then I get an error message in the events: keyup,keydown,pageup and pagedown.

Error in Firebug: item.offset() is null

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 39px; left: 79px; display: block; width: 273px;">
<li class="">No Results</li>
</ul>

What can I do to add a custom -li- to end of list and that is not selectable?

jQuery-UI 1.8.13

Answer 1

I have found that this widget will complain if your li elements don't contain an a tag. I realize this makes it selectable, so you'll either have to extend the class a bit for your case or create a CSS rule that ensures the li doesn't get a selected state (which is a bit of a hack, I admit)

Answer 2

Rather than messing with the CSS selectors, why not bind to the select and change events to inspect the custom data you're adding to the object (available via the ui.item argument to those events)? You'd end up with something like this:

$(function() {
    $("#acInput").autocomplete({
                                    source: availableTags,
                                    select: function(event, ui) { 
                                        // if it's your info item, then
                                        event.preventDefault(); 
                                    },
                                    change: function(event, ui) { 
                                        // if it's your info item, then
                                        event.preventDefault();
                                    }
                               });
});

Note that the preventDefault() just stops that event. In certain instances (when using the keyboard to navigate the list), it will populate the input with the item's value. You'd want your testing to reset the value of the textbox if you determined that the item selected or the value about to be changed to was in fact your data item.