How to avoid multiple ajax call from the Jquery Autocomplete ? Using Cache

Question

I am using jquery automcomplete with the Ajax call but what i want is if part is present in the json data fetched by the ajax on first call then i want to return that data as it is without giving the ajax call i have tried it as below

  function SearchText() {
        var cache = {};
        $("#txtItem").autocomplete({
            source: function (request, response) {
                var term = request.term;
                $.each(cache, function (index, value) {
                    $.each(value, function (index, value) {
                        if (value.indexOf(term) >= 0) {
                            response(cache[term]);
                            return;
                        }
                    });
                });
                cache = {};
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "JobTagPricing.aspx/GetAutoCompleteData",
                    data: "{'item':'" + document.getElementById('txtItem').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        cache[term] = data.d;
                        response(data.d);
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            },
            minLength: 3
        });
    }

but even if it finds the matching term in the array then also it generates the ajax call. I m stuck here for 3 hrs now any help would be great. I have tried maxCacheLength but it is also not working.

Answer 1

Try this out, sometime ago i faced same problem and came up with this it might work for you

   function SearchText() {
        var cache = {};
        var oldterm;
        $("#txtItem").autocomplete({
            source: function (request, response) {
                if (request.term.indexOf(oldterm) >= 0) {
                    if (typeof (oldterm) != 'undefined') {
                        var data = jQuery.grep(cache[oldterm],
                    function (ele) {
                        return (ele.indexOf(request.term) >= 0);
                    });
                        response($.map(data, function (item) {
                            return { value: item }
                        }))
                        return;
                    }
                } else {
                    cache = {};
                    $.ajax({
                        url: "JobTagPricing.aspx/GetAutoCompleteData",
                        data: "{ 'item': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            oldterm = request.term;
                            cache[request.term] = data.d;
                            response($.map(data.d, function (item) {
                                return {
                                    value: item
                                }
                            }))
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            },
            minLength: 3,
            select: function (event, ui) {
                if (ui.item) {
                    formatAutoComplete(ui.item);
                }
            }
        });
    }

Answer 2

Here is a solution i found for you, It uses jQuery UI's autocomplete using cache and $.map function

function SearchText() {
  var cache = {};
    $("#textbox").autocomplete({
      source: function(request, response) {
       if (request.term in cache) {
        response($.map(cache[request.term].d, function(item) {
         return { value: item.value, id: item.id }
        }))
        return;
       }
       $.ajax({
        url: "JobTagPricing.aspx/GetAutoCompleteData",
        data: "{ 'term': '" + request.term + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json",
        dataFilter: function(data) { return data; },
        success: function(data) {
         cache[request.term] = data;
         response($.map(data.d, function(item) {
          return {
           value: item.value,
           id: item.id
          }
         }))
        },
        error: HandleAjaxError 
       });
      },
      minLength: 3,
      select: function(event, ui) {
       if (ui.item) {
        formatAutoComplete(ui.item); 
       }
      }
     });
}

Hope this helps.