Question

我正在使用jquery automcomplete进行Ajax调用，但我想要的是，如果第一次调用时ajax获取的part数据中存在json，那么我想要在不给出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使用缓存和$ .map函数自动完成

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

希望这有帮助。

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

2 个答案: