Déterminez quand un utilisateur saisit

Je suis en train de créer un champ de recherche (champ de saisie) qui devrait faire un appel serveur pour filtrer une grille avec le texte qui y est inséré, mais je dois le faire intelligemment, je dois déclenche l'appel du serveur uniquement si l'utilisateur s'est arrêté. En ce moment j'essaie de l'implémenter, mais si quelqu'un sait comment le faire, je serai très heureux. En tout cas, si je le fais d'abord, je posterai la réponse ici ... Cordialement, Jaime.Déterminez quand un utilisateur saisit

Source

2008-12-11 Jaime Febres

Lorsqu'une touche est pressée:
1. Vérifiez s'il y a une minuterie existante - arrêter s'il y a une
2. démarrer une minuterie.
Lorsque la temporisation expire, appelez la méthode serveur.

var searchTimeout; 
document.getElementById('searchBox').onkeypress = function() { 
    if (searchTimeout != undefined) clearTimeout(searchTimeout); 
    searchTimeout = setTimeout(callServerScript, 250); 
}; 
function callServerScript() { 
    // your code here 
}

Source

2008-12-11 16:15:10 nickf

Assurez-vous que le temporisateur a un délai aussi long que vous considérez comme 'fait de taper' de sorte que vous n'attrapiez pas de petites pauses. Vous pouvez également utiliser l'événement onblur pour voir quand l'utilisateur clique sur hors de la zone de texte. – Karl

Oui, le délai dépend de l'intensité de la recherche, de la réactivité souhaitée et de la rapidité avec laquelle les utilisateurs tapent normalement. J'ai utilisé 250ms pour une recherche et ça a été bien IMO. – nickf

ne devrait pas l'événement être onkeypress, ou quelque chose comme ça? –

Je ne sais pas beaucoup sur JavaScript, mais vous pouvez utiliser une minuterie (permet de dire réglé à 5 secondes) qui obtient remis à zéro à chaque événement de changement de votre boîte d'entrée. Si l'utilisateur arrête de taper pendant plus de 5 secondes, le délai expire et déclenche l'envoi. Le problème avec cette approche est que la soumission est déclenchée à chaque pause, par ex. si l'utilisateur arrête de taper pour raconter une pause café. Vous devrez voir si cela est acceptable pour les utilisateurs.

Source

2008-12-11 16:16:28 Treb

Vous pouvez utiliser des appels à setTimeout qui appelle la fonction de votre serveur (avec un délai peut-être 2-3 secondes) sur un événement de pression de touche. Dès qu'une touche est activée, annulez l'appel setTimeout précédent et créez-en un nouveau.

Ensuite, 2-3 secondes se sont écoulées sans pression de touche, l'événement du serveur sera déclenché.

Source

2008-12-11 16:16:56

hehe ... vous diable malin nickf! Vous tapez plus vite que moi aussi. –

muahahah :) Vous pensez que j'ai obtenu ce niveau de rep en * connaissant * les choses? Hé! – nickf

Héhé ... Vous pouviez au moins me réconforter en consolation: D Après tout, je * le * savais, et ma réponse * est * utile. –

merci pour vos commentaires. Je l'avais mis en œuvre ce morceau de code et il semble qu'il fait le travail (en utilisant jquery):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script src="jquery.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    var interval = 500; 
    var filterValue = ""; 
    $(document).ready(function() { 
     $(".txtSearch").bind("keypress", logKeyPress); 
    }); 
    function logKeyPress() { 
     var now = new Date().getTime(); 
     var lastTime = this._keyPressedAt || now; 
     this._keyPressedAt = now; 
     if (!this._monitoringSearch) { 
      this._monitoringSearch = true; 
      var input = this; 
      window.setTimeout(
       function() { 
        search(input); 
       }, 0); 
     } 
    } 
    function search(input) { 
     var now = new Date().getTime(); 
     var lastTime = input._keyPressedAt; 
     if ((now - lastTime) > interval) { 
      /*console.log(now); 
      console.log(lastTime); 
      console.log(now - lastTime);*/ 
      if (input.value != filterValue) { 
       filterValue = input.value; 
       //console.log("search!"); 
       alert("search!"); 
      } 
      input._monitoringSearch = false; 
     } 
     else { 
      window.setTimeout(
       function() { 
        search(input); 
       }, 0); 
     } 
    } 
</script>

Source

2008-12-11 17:55:36

Désolé, mais je ne pense pas que ce soit un très bon moyen de le faire ... n'appelera-t-il pas continuellement search() encore et encore jusqu'à ce que l'intervalle soit écoulé? – nickf

Non, il s'arrêtera lorsque la différence entre la dernière fois qu'une touche a été pressée et l'heure actuelle> à la variable * intervalle * (mauvais nom que je connais). Essayez-le par vous-même. –

Voici un simple manière qui fonctionnera sans jQuery:

<input type="text" id="TxtSearch" onchange="countDown=10;" /> 

<script type="text/javascript"> 

var countDown = 0; 
function SearchTimerTick() 
{ 
    if(countDown == 1) 
    { 
     StopTypingCommand(); 
     countDown = 0; 
    } 

    if(countDown > 0) 
     countDown--; 
} 

window.setInterval(SearchTimerTick,1000); 

</script>

Source

2008-12-11 18:43:11 Paul

Vous souhaitez également vérifier la longueur de la chaîne sur la boîte de saisie, sinon vous risquez de retourner un jeu de résultats énorme!

Source

2008-12-12 00:26:49

très vrai point - bien que cela pourrait probablement être fait côté serveur. certainement vérifier pour une chaîne vide cependant. – nickf

Merci pour votre commentaire, dans la vraie application une boîte vide est un filtre de critères valide (cela signifie * tout montrer *), je pagine les résultats de sorte qu'il n'y a pas de frais généraux. –

Déterminez quand un utilisateur saisit

Répondre

Questions connexes