使用$ .map函數的jQuery UI自動完成緩存

Question

我正在嘗試使用jQuery UI自動完成實現緩存。 我使用jQuery 1.4.4和1.8.6的UI

這裏是我工作的基本代碼：

$('#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 
        }; 
       })); 
      } 
     }); 
    } 
}); 

這是我試圖讓緩存從看例子工作：

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

那裏的任何接受者？

Answer 1

這裏是我使用cache的jQuery UI自動完成的工作示例。希望它能幫助：

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

如果你不是現在這樣做，得到Firebug。這對於web開發來說是非常寶貴的工具。你可以在這個JavaScript上設置一個斷點，看看會發生什麼。

Answer 2

問題出在我的緩存[術語]當我試圖拋出我的$ .map函數，因爲它不是必需的。

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

所以這是我爲那些誰仍然有問題的最終腳本：我也離開了所有選項出這以避免任何混淆 。

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