jquery-ui - 仅当在本地构建的数组中找不到结果时，才在 jquery 自动完成中使用 ajax 调用

Question

在我的网络应用程序中，我显示股票价格。我使用 jquery 自动完成功能在输入股票名称时显示选项。但我已经构建了 javascript 数组的本地副本。我想显示此本地数组中的选项，如果在本地数组中找不到搜索词，则必须进行 ajax 调用以从服务器端获取列表。

谢谢!!!

     //Local array
     var local_array=["option1","option2"];

     //jqueryUI call of autocomplete function
     $('#search_stock').autocomplete({
     source:function(){
                 if(search term is found in local array)
                 {
                     show suggestion from local array.
                 }
                 else
                 {
                      make ajax call to show suggestions of stock names.
                 }
            }
       });

更新

这是实际的代码

$(function() {
  var cache = {'option1':'option1','option2':'option2'}, lastXhr;
  $( "#stock_rates" ).autocomplete({
    minLength: 2,
    source: function( request, response ) {
      var term = request.term;
      if ( term in cache ) {
        response( cache[ term ] );
        return;
      }
      lastXhr = $.getJSON( "stock_rates.php", request, function( data, status, xhr ) {
        cache[ term ] = data;
        if ( xhr === lastXhr ) { response( data ); }
      });
    }
  });
});

Answer 1

jQuery UI 自动完成的示例页面有一个恰好解决此问题的示例。

http://jqueryui.com/demos/autocomplete/#remote-with-cache 。单击该页面上的“查看源代码”链接可查看示例的代码。

关键部分是“源”接受参数。

source: function(request, response){

您需要读取request，从缓存中获取值，或者执行请求，然后调用response函数并向其传递匹配的值。

更新

您现在的问题是您存储在缓存中的格式错误。缓存仅存储从 getJSON 调用返回的数据，并按搜索词索引。由您决定是否进行前缀检查等。

要继续您现在尝试的方式，您需要正确填充缓存。

var cache = {
  "o": ['option1', 'option2'],
  "op": ['option1', 'option2'],
  // ....
  "option1": ['option1'],
  "option2": ['option2']
};

否则，您可以以不同的方式存储数据，并在“源”函数中放入更多逻辑，以对静态数组或其他内容进行前缀检查。但这实际上取决于您正在缓存的数据。