I have an autoplete 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').autoplete({
    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.

I have an autoplete 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').autoplete({
    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.

• javascript
• jquery
• autoplete
• jquery-autoplete
• jquery-ui-autoplete

3 Answers 3

There is a simple solution for this in the jQuery UI Autoplete 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 ments for clarification:

var cache = {};
$( "#country" ).autoplete({
    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-autoplete), 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.

I ended up not using this method at all and going with fast, quick searches with a limit of 100. But since I asked, here is how I sent requests using only the first character:

 // global variables: models [], result {}

          lookup: function(query, done) {

                var mdl = $("#autoplete").val();
                if (mdl.length == 0) {
                    names = [];
                    result.suggestions = models;
                    done(result);
                    return;
                } else if (mdl.length != 1) {
                    result.suggestions = names;
                    console.log(result);
                    done(result);
                    return;
                }

                var jqHXR = $.ajax({url: "search.php",   
                        data: {"q": mdl},
                        dataType: "json",
                        method: "GET" }
                )
                .done(function(data, status, jqXHR){
                    models = [];
                    $.each( data, function( key, val) {
                        names.push({ value: val.u, data: { category: genders[val.g] } });
                    });

                    result.suggestions = names;
                    done(result);
                })
                .fail(function (data, status, errorThrown) {
                        console.log("failed: "+status+"| error: "+errorThrown);
                        console.log(data);
                });
            },

A colleague of mine used devbridge and my research seems to verify that there's an attribute for the devbridgeAutoplete object for minChars and lookupLimit. Maybe there are different instances of devbridgeAutoplete, but I thought it was worth posting just in case they're similar, though I should assume you would have seen them already :).

Here's the code:

var a =  $('#<%= txtFindName.ClientID %>').devbridgeAutoplete({
           minChars: 3,
           lookupLimit: 20,
            serviceUrl: 'AutoComplete/ADUsers.aspx',
            onSelect: function (suggestion) {
                $('#<%= txtTo.ClientID %>').val( $('#<%= txtTo.ClientID %>').val() + ',' + suggestion.data);
                $('#<%= txtFindName.ClientID %>').val('');
            }
       });