use lookup and/or service url in jquery autocomplete

Question

I have an autocomplete feature in my application which makes an ajax request to server. However, once I get data from server, I want to use the look up feature instead of using the service url(to minimize calls to server).

Here is what my js looks like

$('#country').autocomplete({
    serviceUrl : './countryCache?',
    paramName : 'countryName',
    transformResult : function(response) {
        return {
            // must convert json to javascript object before process
            suggestions : $.map($.parseJSON(response), function(item) {
                return {
                    data : item.name
                };
            })
        };
    },
    showNoSuggestionNotice:true,
    onSelect: function (value, data) {
        $('#countryId').val(value.data);

    }

});

Here is a sample from my ajax call to countryCache - "India, Iceland, Indonesia". If the user has typed I, the server returns back the result as above. Now when the user types in n after I, I dont want to make a call to server again. Can someone help me achieve it.

Answer 1

There is a simple solution for this in the jQuery UI Autocomplete documentation. There you'll find a section titled Remote with caching that shows how to implement what you are looking for.

I adapted the code from that site to this question, and added some comments for clarification:

var cache = {};
$( "#country" ).autocomplete({
    source: function( request, response ) {
        // If the term is in the cache, use the already existing values (no server call)
        var term = request.term;
        if ( term in cache ) {
            response( cache[ term ] );
            return;
        }

        // Add countryName with the same value as the term (particular to this question)
        // If the service reads the parameter "term" instead, this line can be deleted.
        request.countryName = request.term;

        // Call the server only if the value was not in the cache
        $.getJSON( "./countryCache", request, function( data, status, xhr ) {
            cache[ term ] = data;
            response( data );
        });
    },
    select: function (event, data) {
        $('#countryId').val(data.item.value);
    }
});

As I didn't know exaclty the format of the JSON, I just used a basic one that for the text "In" returned: ["India","Indonesia","Spain"] (without ids, just a plain array).

---

If what you are using is the Ajax AutoComplete plugin for jQuery (the code above looks like it, although the question was tagged with jquery-ui-autocomplete), then you don't have to worry about caching, because the plugin does it automatically for you.

From the plugin's documentation:

noCache: Boolean value indicating whether to cache suggestion results. Default false.

As you didn't specify any value for nocache, then it will take the default value that is false, and it will perform caching directly.