如何使用提取结果状态栏打开Jquery自动完成功能

Question

我正在使用JqueryUI自动完成功能。有时，结果的获取不是即时的，所以我想通知用户自动完成正在提取匹配其查询的选项。

我的代码：

$("#searchid").autocomplete({ 
    source: "/autocomplete_url.php", 
    minLength:3,   
    select: function(event, ui) { 
      event.preventDefault(); 
      $("#searchid").val(ui.item.value); 
      $("#formid").submit(); 
     } 
}); 

我怎样才能使自动完成发送到正在努力寻找结果的Web服务请求时打开一个“取结果状态栏”？

Answer 1

此方法假定您使用Ajax调用来检索数据集，但我使用了类似的东西，它工作正常。

在您想要留言的页面上设置div。

HTML：

<div id="AutocompleteStatus" style="display:none">Loading data...please wait</div> 

然后你要抓住关键了事件您自动完成：

的jQuery：

$("#searchid").keyup(function() { 
    $('#AutocompleteStatus').show(); 
}); 

然后您自动完成可能是这个样子：

$("#searchid").autocomplete({ 
    source: function(request, response) { 
    $.ajax({ 
     url: "/autocomplete_url.php", 
     dataType: "json", 
     data: { 
     style: "full", 
     maxRows: 12, 
     name_startsWith: request.term 
     }, 
     success: function(data) { 
     $("#AutocompleteStatus").hide(); // <== HIDE IT HERE 
     response($.map(data.returndata, function(item) { 
      return { 
      label: item.name, 
      value: item.value 
      } 
     })); 
     } 
    }); 
    }, minLength:3,   
    select: function(event, ui) { 
     event.preventDefault(); 
     $("#searchid").val(ui.item.value); 
     $("#formid").submit(); 
    } 
}); 

所以短版本：在您的搜索框上键入显示div，从您的Ajax调用返回（我使用示例参数名称，您的示例没有给出任何实际名称），只是再次隐藏div。