CODEWITHSUNDEEP
javascriptjqueryautocompletejquery-autocompletejquery-ui-autocomplete
BKSingh
BKSingh

Reputation: 527

use lookup and/or service url in jquery autocomplete

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.

Upvotes: 7

Views: 10520

Answers (3)

user1040975
user1040975

Reputation: 440

A colleague of mine used devbridge and my research seems to verify that there's an attribute for the devbridgeAutocomplete object for minChars and lookupLimit. Maybe there are different instances of devbridgeAutocomplete, 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 %>').devbridgeAutocomplete({
           minChars: 3,
           lookupLimit: 20,
            serviceUrl: 'AutoComplete/ADUsers.aspx',
            onSelect: function (suggestion) {
                $('#<%= txtTo.ClientID %>').val( $('#<%= txtTo.ClientID %>').val() + ',' + suggestion.data);
                $('#<%= txtFindName.ClientID %>').val('');
            }
       });

Upvotes: 0

felwithe
felwithe

Reputation: 2744

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 = $("#autocomplete").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);
                });
            },

Upvotes: 0

Alvaro Montoro
Alvaro Montoro

Reputation: 29635

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 ), 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.

Upvotes: 6

Related Questions