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

Question

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

我的代码:

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

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

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 .