JQuery不斷髮送AJAX請求

我試圖使用Jquery Ajax請求來實現自動完成功能。我在後端使用ElasticSearch。JQuery不斷髮送AJAX請求

這裏是我的autocomplete.html

<!DOCTYPE html> 
<html lang="en" class="no-js"> 
    <head> 
     <meta charset="UTF-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta name="description" content="Autocomplete using Elasticsearch "> 
     <title>Elasticsearch Autocomplete</title> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    </head> 
    <style type="text/css"> 
    .container{ 
     width:90%; 
     margin:5em auto; 
    } 
    </style> 
    <body> 
     <div class="container"> 
      <div class="input-group"> 
       <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span> 
       <input type="text" class="form-control" placeholder="Search" aria-describedby="basic-addon1" id="search" onfocus="setFocus(1)" onblur="setFocus(0)"> 
      </div> 
      <div id="results"></div> 
     </div><!-- /container --> 
    </body> 
    <script type="text/javascript"> 
    var focus=0; 
    var results=''; 
    function setFocus(n){ 
     focus=n; 
     getSuggest(); 
    } 
    function getSuggest(){ 
     var search=$('#search'); 
     var text=search.val(); 
     var feed ='{"suggest" : {"text" : "'+text+'","completion" : {"field" : "suggest"}}}'; 
     $.post("http://localhost:9200/songs/_suggest?pretty", feed, function(data) {  
      //console.log (data['suggest'][0]['options']["0"]['text']); 
      $.each(data['suggest'][0]['options'], 
       function(index, value){ 
        results+=value.text; 
        results+='<br/>'; 
       } 
       ); 
      $('#results').html(results); 
      results=''; 
      if (focus==1) setTimeout(function(){getSuggest()}, 300); 
     }); 
    } 
    </script> 
</html>

它的正常工作也。下面是輸出：

但我有兩個問題：

阿賈克斯繼續發送請求到後端即使我不打字別的。我只需鍵入br並可以看到兩個結果。之後它不應該發送任何請求。下面是從螢火蟲輸出：

我想選擇在自動填充下拉元件。例如下面

隨時問，如果你有任何問題。

來源

2015-10-23 TheCodingFrog

您似乎在代碼中有一個無限遞歸循環。行

if (focus==1) setTimeout(function(){getSuggest()}, 300);

呼叫getSuggest()遞歸，每300毫秒，除非的focus的值改變爲不等於1的focus值不會在getSuggest()改變，因此遞歸環路可無限繼續，除非值focus的外部更改。

編輯：
每當搜索領域的文本改變了你可以使用jQuery的.on()函數來調用getSuggest功能。

$(document).ready(function(){ 
    $("#search").on("change click keyup keypress input paste", getSuggest); 
});

這是一個有點過度使用所有這些事件中on，你可能會或可能不希望包括他們所有，但每當搜索欄中輸入值發生變化，這將調用getSuggest。

來源

2015-10-23 04:24:43 Andrew

但是，如果我刪除這一行，那麼它只會向服務器發送一個請求。任何推薦的方法來克服這一點？ – TheCodingFrog

謝謝安德魯！如果我改變了文本，它每次發送三個請求。我已經減少了事件'改變點擊輸入'，它工作正常。你也可以幫助我如何選擇一個結果並填寫輸入框？ – TheCodingFrog

當函數的setFocus被調用時，函數getSuggest被調用，在結束通話，如果焦點等於公司本身1：

if (focus==1) setTimeout(function(){getSuggest()}, 300);

問題是焦點未設置爲0（或有什麼不同比1），所以getSuggets不斷調用自己的時間。

來源

2015-10-23 04:26:06

JQuery不斷髮送AJAX請求

回答

相關問題