javascript 使用 $.map 函数的 jQuery UI 自动完成缓存

jQuery UI autocomplete caching using $.map function

提问by nolabel

I am trying to implement caching using jQuery UI autocomplete. I am using jQuery 1.4.4 and UI 1.8.6

我正在尝试使用 jQuery UI 自动完成来实现缓存。我正在使用 jQuery 1.4.4 和 UI 1.8.6

Here is the basic code that I got working:

这是我开始工作的基本代码：

$('#searchbox').autocomplete({
    source: function(request, response) {
            if (xhr === lastXhr) {
                response( $.map(data, function(item) {
                    return {
                        label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                        value: item.NAME
                    };
                }));
            } 
        });
    }
});

Here is my attempt to get caching to work from looking at the example:

这是我通过查看示例来使缓存工作的尝试：

var cache = {},
    lastXhr;
$('#searchbox').autocomplete({
    source: function(request, response) {
        var term = request.term;
        if (term in cache) {
            response($.map(cache[term], function(item) {
                return {
                    label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                    value: item.NAME
                };
            }));
        }
        lastXhr = $.getJSON( "getdata.php", request, function(data, status, xhr) {
            cache[term] = $.map(data, function(item) {
                return {
                    label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                    value: item.NAME
                };
            }); 
            if (xhr === lastXhr) {
                response( $.map(data, function(item) {
                    return {
                        label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                        value: item.NAME
                    };
                }));
            } 
        });
    }
});

Any takers out there?

有接盘手吗？

采纳答案by rebelliard

Here's my working example of jQuery UI's autocomplete using cache. Hope it helps:

这是我使用cache. 希望能帮助到你：

    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: "/Services/AutoCompleteService.asmx/GetEmployees",  /* I use a web service */
        data: "{ 'term': '" + request.term + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        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  // custom method
       });
      },
      minLength: 3,
      select: function(event, ui) {
       if (ui.item) {
        formatAutoComplete(ui.item);   // custom method
       }
      }
     });

If you're not doing so by now, get Firebug. It's an invaluable tool for web development. You can set a breakpoint on this JavaScript and see what happens.

如果您现在还没有这样做，请获取Firebug。它是 Web 开发的宝贵工具。您可以在此 JavaScript 上设置断点，看看会发生什么。

回答by nolabel

The problem lies in my cache[term] when I was trying to throw my $.map function in it because it is not needed.

当我试图将 $.map 函数放入其中时，问题出在我的缓存 [term] 中，因为它不需要。

cache[term] = $.map(data, function(item) {
                    return {
                        label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                        value: item.NAME
                    };
                });

So here is my final script for those who are still having trouble: I also left all option out of this to avoid any confusion.

所以这是我给那些仍然有问题的人的最终脚本：我也把所有选项都排除在外，以避免任何混淆。

var cache = {},
 lastXhr;

$('#searchbox').autocomplete({
    source: function(term, response) {
        var term = term;
        if (term in cache) {
            response($.map(cache[term], function(item) {
                return {
                    /*Format autocomplete to display name and job title, e.g., Smith, John, Web Developer*/
                    label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                    /*Replace the searched value with the value selected.*/
                    value: item.NAME
                };
            }))
            /*I happened to leave this out, which I think what one of the main cause my caching did not work.*/
            return;
        }
        lastXhr = $.getJSON( "getdata.php", request, function(data, status, xhr) {
            cache[term] = data;
            if (xhr === lastXhr) {
                response($.map(data, function(item) {
                    return {
                        label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                        value: item.NAME
                    };
                }));
            } 
        });
    }
});