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

时间:2012-02-12 18:21:42

标签: jquery-ui jquery jquery-plugins

在我的网络应用程序中,我显示的是股票的比率。我正在使用jquery autocomplete来显示期权,同时委托股票名称。但我已经构建了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 ); }
      });
    }
  });
});

2 个答案:

答案 0 :(得分:0)

jQuery UI自动完成的示例页面就是这个问题的一个例子。

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

关键部分是'source'需要参数。

source: function(request, response){

您需要阅读request,要么从缓存中获取值,要么执行请求,然后调用response函数并将匹配的值传递给它。

<强>更新

您现在的问题是您在缓存中存储的格式是错误的。缓存只存储从getJSON调用返回的数据,由搜索项索引。这取决于你做前缀检查等。

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

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

否则,您可以以不同方式存储数据,并在“源”函数中添加更多逻辑,以对静态数组或其他内容进行前缀检查。这一切都取决于您缓存的数据。

答案 1 :(得分:0)

使用自动填充的搜索事件并检查您在该事件中的状况,并根据该返回的真或假,如果您想分别进行ajax调用。

以下是示例代码。

$('#search_stock').autocomplete({
 search:function(event,ui){
             if(search term is found in local array)
             {
                 return false;
             }
             else
             {
                 return true;
             }
        }
   });