web-dev-qa-db-fra.com

AJAX: Délai de recherche pour la saisie dans le champ du formulaire

Sur mon site Web, j'utilise JavaScript/AJAX pour faire la recherche et afficher les résultats pendant que l'utilisateur tape encore.

HTML (corps):

<form action="" method="post" accept-charset="utf-8">
    <p><input type="text" name="q" id="q" value="" onkeyup="doSearch(this.value)" /></p>
</form>

JavaScript (en-tête):

function doSearch(text) {
    // do the ajax stuff here
    // call getResults.php?search=[text]
}

Mais cela pourrait provoquer de nombreuses demandes sur le serveur.

Ainsi je veux soulager le serveur en mettant en place un délai:

Chaque fois que l'événement onkeyup est déclenché, la fonction doSearch () doit afficher un "graphique de chargement ajax" et attendre 2 secondes. Ce n'est que si l'événement n'est PAS déclenché à nouveau pendant ces 2 secondes que les résultats doivent être récupérés à partir du fichier PHP.

Est-ce qu'il y a un moyen de faire ça? Pourrais-tu m'aider s'il te plait? Merci d'avance!

javascriptajaxformsinput
35
caw
var delayTimer;
function doSearch(text) {
    clearTimeout(delayTimer);
    delayTimer = setTimeout(function() {
        // Do the ajax stuff
    }, 1000); // Will do the ajax stuff after 1000 ms, or 1 s
}
98
Mike Richards

Configurez simplement l'invocation retardée avec setTimeout (), puis supprimez-la à nouveau à chaque événement avec clearTimeout ()

HTML 

<form action="" method="post" accept-charset="utf-8">
    <p><input type="text" name="q" id="q" value="" onkeyup="doDelayedSearch(this.value)" /></p>
</form>

Javascript

var timeout = null;

function doDelayedSearch(val) {
  if (timeout) {  
    clearTimeout(timeout);
  }
  timeout = setTimeout(function() {
     doSearch(val); //this is your existing function
  }, 2000);
}
15
Jonas Høgh

Pour ce type de chose, j'ai tendance à utiliser une petite fonction astucieuse de limitation créée par Remy Sharp:

http://remysharp.com/2010/07/21/throttling-function-calls/

4
Andy Hume