自動完成改進

我想實現文本框自動完成功能。目前我使用jQuery Autocomplete，但我無法實現與搜索延遲有關的功能;例如，如果我搜索「新」，我將有一個自動完成列表['New York'，'New South Memphis'.....] 現在，如果我按「S」並立即按下箭頭，則I最終選擇第一個項目即「紐約」，而不是以「New S」開頭的城市獲得結果。 [以'New S'開始的搜索城市的Web服務調用被觸發] 我想實現的是阻止向下箭頭直到檢索結果。如果任何人都可以解釋我應該專注於實現此功能還是由於Web服務調用的異步性質而不可能？自動完成改進

$(document).ready(function() { 
 

 
    $("#locations").keydown(function() { 
 

 
     var keyword = $("#locations").val(); 
 
     var url = 'http://autocomplete.wunderground.com/aq?format=json&cb=myCallbackFn&query=' + keyword; 
 
     $.ajax({ 
 
      type: 'GET', 
 
      url: url, 
 
      async: true, 
 
      dataType: 'jsonp', 
 
      error: function(e) { 
 
       console.log(e.message); 
 
      } 
 
     }); 
 
    }); 
 

 

 

 
}); 
 

 
var myCallbackFn = function(data) { 
 
    var cities = []; 
 
    for (i = 0; i < data.RESULTS.length; i++) { 
 
     if (data.RESULTS[i].type == 'city') { 
 
      cities.push(data.RESULTS[i].name); 
 
     } 
 
    } 
 

 
    $("#locations").autocomplete({ 
 
     source: cities 
 
    }).autocomplete("widget").addClass("fixed-height"); 
 
}

<html> 
 
\t <head> 
 
\t \t <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css"> 
 
\t \t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
\t \t <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script> 
 
\t \t <script type="text/javascript" src="custom.js"></script> 
 
\t \t 
 
\t \t <style> 
 
\t \t \t \t .fixed-height { 
 
\t \t \t \t \t padding: 1px; 
 
\t \t \t \t \t max-height: 200px; 
 
\t \t \t \t \t overflow: auto; 
 
\t \t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t \t <div class="ui-widget"> 
 
\t \t \t \t \t \t <label for="tags">Autocomplete: </label> 
 
\t \t \t \t \t \t <input id="locations" type="text" size="50"/> 
 
\t  </div> 
 
    </body> 
 
</html>

來源

2015-10-02 Bruce

你可以嘗試在keydown事件監聽器$（'＃locations'）的第一行加入這個。autocomplete（「destroy」）; – NightsWatch

完成，這將是要麼當您的建議，新的GET請求被解僱，或者刪除所有自動完成建議的一種方式，設置一個標誌，忽略向下箭頭按鍵，直到該請求已解決。

來源

2015-10-02 21:07:23

是否有可能使用承諾等待請求解決？ – Bruce

是的 - 這是承諾的目的。 –

自動完成改進

回答

相關問題