How to at least display an item in JqueryUI autocomplete panel when no result found

Question

I'm trying to force the jqueryUI autocomplete's panel/list to at least display a default item (such as "Add New Item") when the no match has been found. The item must be able to bind with some event-handler too.

So far I had tried overcome this problem by adding a pseudo AC panel when the real AC panel is found hidden.

I'm also wondering if it is possible to dynamically update the "source" (in jqueryui.autocomplete's option), inserting an item to the dataset, so that whatever type in to the textbox will be detected as a match and hence be displayed. (Sorry, really difficult to explain this part).

Is there any better way to achieve that?

Answer 1

you could override the _renderItem function and do you own display and add the 'Add new Item' text.

something like this: (warning untested)

$('#yourinputelementid').data( "autocomplete" )._renderMenu: function( ul, items ) {
        var self = this;
        $.each( items, function( index, item ) {
            self._renderItem( ul, item );
        });
        var newitem = $( "<li>Add New Item</li>");
        newitem.click(function(event) {
            alert("newitem test");
        });
        self.append(newitem);
    }
.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
};

see here

Answer 2

i came with a work around using the remote datasource. ( http://jqueryui.com/demos/autocomplete/#remote )

simply pass an item through ajax (the default item, from the server), when no results found.

Solved!