L'événement jQuery keyup est activé plusieurs fois, en doublant chaque fois qu'il est déclenché

Question

J'ai ajouté une barre de recherche auto-complétante à mon site Web. Il interroge la base de données pour les éléments qui commencent par la chaîne entrée chaque fois que l'utilisateur tape un nouveau caractère.

Cela fonctionne bien, mais chaque fois que l'utilisateur ajoute un autre caractère ou fait un événement de clavier comme retour arrière, il double l'activation de l'événement. 1,2,4,8,16, etc. fois.

Comment est-ce que je pourrais faire en sorte qu'il n'accumule pas les déclenchements d'événement et déclenche seulement des déclenchements .keyup() une fois par événement de clavier?

Voici le code 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> 

Et voici le code jQuery:

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

Answer 1

J'ai finalement compris comment y remédier.

Pour les personnes intéressées, voici comment je l'ai fait:

(utilisateur expérimenté De toute évidence plus s'il vous plaît ne hésitez pas à me corriger si je me trompe!)

En fait, l'ajout d'une méthode .one() a résolu le problème. Comme il détache l'événement de l'élément "#id1" en l'exécutant une seule fois.

Voici le code fonctionnel :

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

À titre de comparaison est ici la vieille un comme affiché ci-dessus à nouveau:

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

Answer 2

Ajouter ces lignes:

$(document).ready(function() { 
var lastTime = Date.now(), milisecondsToWait = 2000;//Here we will wait 2 seconds 
    $('#id1').keyup(function(){ 
    if(Date.now() - lastTime >= milisecondsToWait){//And here 
     var query = $(this).val(); 
     $.get('/url/', {items: query}, function(data){ 
     $('#id2').html(data); 
     lastTime = Date.now(); //And finally here 
     }); 
    } 
    }); 
});