javascript - jQuery keyup 事件被多次激活，每次触发时加倍

Question

我在我的网站上添加了一个自动完成的搜索栏。每次用户键入新字符时，它都会在数据库中查询以输入的字符串开头的元素。

它工作正常，但是每次用户添加另一个字符或执行任何键盘事件(如退格键)时，它都会使事件激活加倍。 1、2、4、8、16 等.. 次。

我怎样才能让它不累积事件触发器并且每个键盘事件只触发 .keyup() 一次？

这是 HTML 代码:

<form>
<div class="nav-item">
    <input class="search-query form-control" placeholder="Items" 
       type="text"  name="items" value="" id="id1" />
</div>
</form>
<hr>
<div id="id2">
</div>

这是 jQuery 代码:

$(document).ready(function() {
  $('#id1').keyup(function(){
    var query = $(this).val();
    $.get('/url/', {items: query}, function(data){
      $('#id2').html(data);
    });
  });
});

Answer 1

我终于想出了解决办法。

对于任何感兴趣的人，这是我是如何做到的:

(显然更有经验的用户请随时纠正我，如果我错了!)

基本上，添加一个 .one()方法解决了。因为它通过仅执行一次来将事件与 "#id1" 元素分离。

这是功能代码:

$(document).ready(function() {
  $('#id1').one("keyup", function(){
    var query = $(this).val();
    $.get('/url/', {items: query}, function(data){
      $('#id2').html(data);
    });
  });
});

为了进行比较，这里是上面再次发布的旧:

$(document).ready(function() {
  $('#id1').keyup(function(){
    var query = $(this).val();
    $.get('/url/', {items: query}, function(data){
      $('#id2').html(data);
    });
  });
});