Question

I’m using jQuery autocomplete for a search field. When the autocomplete source returns a response of 0 results, the autocomplete feels broken. How can I always add a helper message at the bottom of autocomplete.

I’d like the helper message to appear on focus, and anytime 0 or more results. Here is what I have so far:

        var me = this,
            cache = {}, // Autocomplete Caching (not built into jQuery UI by default)
            lastXhr,
            ac_div = $("#header-search-q");

        ac_div.autocomplete({
            appendTo: "#header-search",
            source: function(request, response) {
                var term = request.term.toLowerCase();
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }
                lastXhr = $.getJSON( "/users/search", _(request).extend({'q_type':'all'}), function( data, status, xhr ) {
                    cache[ term ] = data.users;
                    if ( xhr === lastXhr ) {
                        response( data.users );
                    }
                });
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {        
            return $('<li></li>')
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "</a>")
            .appendTo( ul );
        };
    }

How can I always have an LI like this in the autocomplete:

<li class="helper">Can't find them?</a>

Thanks

Answer 1

You can probably do a small hack in your source function, like this:

source: function(request, response) {
                var term = request.term.toLowerCase();
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }
                lastXhr = $.getJSON( "/users/search", _(request).extend({'q_type':'all'}), function( data, status, xhr ) {
                    cache[ term ] = data.users;
                    if ( xhr === lastXhr ) {
                        /* Hack follows: */
                        if(!data.users.length) data.users.push("Can't find them?");
                        response( data.users );
                    }
                });
            }

I recently fiddled with the autocomplete source code and I found it clear and easy to customize and change its behavior, so that’s an alternative.