用户停止输入时的Ajax搜索

时间:2016-05-13 22:59:49

标签: javascript html ajax

我希望在用户停止输入时执行ajax,但是这不能用于按键事件,当我在输入时使用id searchtext将onkeyup = doneTyping()放入浏览器时崩溃

<script>    
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#search_text');
 var txt = $(this).val(); 
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

function doneTyping () {
     $.ajax({  
                     url:"fetch.php",  
                     method:"post",  
                     data:{search:txt},  
                     dataType:"text",

                     success:function(data)  
                     {  
                          $('#searchresults').html(data);  
                     }  
              });  

  //do something
}  
</script>

谢谢

1 个答案:

答案 0 :(得分:0)

我将您的代码转换为代码段并添加了一些控制台日志记录以显示正在发生的事情。

这表明这些事件与您描述的完全一致......并且“完成了输入”。在我退出键入后5秒钟在控制台中显示。

&#13;
&#13;
var typingTimer; //timer identifier

var doneTypingInterval = 5000; //time in ms, 5 second for example
var $input = $('#search_text');

console.log("$input = ", $input.length);

$input.on('keyup', function() {
  console.log("Key up");
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

$input.on('keydown', function() {
  console.log("Key down");
  clearTimeout(typingTimer);
});

function doneTyping() {
  console.log("Done typing");
  }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Test input: <input id="search_text">
&#13;
&#13;
&#13;