如何使用获取结果状态栏打开 Jquery 自动完成答案

【问题标题】：How to open the Jquery autocomplete with a fetching results status bar如何使用获取结果状态栏打开 Jquery 自动完成
【发布时间】：2014-08-14 10:44:37
【问题描述】：

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

我的代码：

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

向正在查找结果的网络服务发送请求时，如何使自动完成功能打开“获取结果状态栏”？

【问题讨论】：

一种方法是在 #searchid 上捕获 keyup 事件并显示您的状态 div。当自动完成返回结果时，再次隐藏它。

标签： javascript jquery css jquery-ui autocomplete

【解决方案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 .

【讨论】：