Use search and / or service url in jQuery autocomplete

Question

I have an autocomplete function in my application that makes an ajax request to the server. However, as soon as I receive data from the server, I want to use the search function, and not use the service URL (to minimize calls to the server).

This 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 an example of my ajax call to countryCache - "India, Iceland, Indonesia." If the user typed I, the server will return the result as described above. Now that the user types n after I, I don’t want to call the server again. Can someone help me with this.

Answer 1

This is a simple solution for this in the jQuery UI Autocomplete documentation . There you will find a section called Remote with caching , which shows how to implement what you are looking for.

I adapted the code from this site to this question and added 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 did not know the exaclty JSON format, I just used the base one, which for the returned text is "In": ["India","Indonesia","Spain"] (without ids, just a simple array).

---

If you are using the Ajax AutoComplete plugin for jQuery (this code looks like the question was tagged with jquery-ui-autocomplete ), then you do not need to worry about caching because the plugin does this automatically for you .

From the plugin documentation:

noCache : A Boolean value indicating whether to indicate the results of a cache request. The default is false .

Since you did not specify any value for noCache , then it will default to false and it will cache directly.

Answer 2

I did not use this method at all and quickly and quickly performed a search with a limit of 100. But since I asked, this is how I sent the 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); }); }, 

Answer 3

My colleague used debridge, and my research seems to confirm the existence of an attribute for the devbridgeAutocomplete object for minChars and lookupLimit. There may be different instances of devbridgeAutocomplete, but I thought it was worth publishing just in case they were similar, although I must assume that you have already seen them :).

Here is 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(''); } });