如何避免Jquery自动完成中的多个ajax调用？ 使用缓存

我正在使用jquery automcomplete与Ajax调用，但我想要的是，如果在第一次调用时ajax提取的json数据中存在part ，那么我想返回该数据，因为它没有给出ajax调用我已经尝试过如下所示

  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 }); } 

但即使它在数组中找到匹配的term ，它也会生成ajax调用。 我被困在这里3个小时现在任何帮助都会很棒。 我尝试过maxCacheLength但它也无法正常工作。

Answer 1

试试这个，前一段时间我遇到了同样的问题并提出了它可能对你有用

  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

这是我找到的解决方案，它使用jQuery UI的自动完成function，使用缓存和$ .mapfunction

 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); } } }); } 

希望这可以帮助。