如何使用提取結果狀態欄打開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。