jQuery Girl
  1. jQuery Girl
  3. jQuery recherche que vous tapez avec ajax
Intereting Posts
Ajax ne fonctionne qu’avec certaines URL Cela semble être une classe sur un événement Javascript. Qu’Est-ce que c’est? Erreur lors de l’obtention de la propriété JSON dans Vue js Validation RegEx Vin avant 1980 et après 1980 Associer des gestionnaires d’événements jQuery afin qu’ils soient déclenchés en premier changer le href d’un lien css via jquery Jquery ajoute une ligne juste en dessous de la ligne sélectionnée Comment remplacer un contenu html par jsf reRender ou ajax load et relier le nouveau DOM avec AngularJS? Supprimer les champs qui ne contiennent aucune valeur avec jQuery CSS Change la couleur de fond à certains moments jqGrid – incohérences de rowObject? Quelle est la bonne façon d’initialiser une propriété vide d’un object en JavaScript DataTables change le nombre de boutons de pagination Créer une API JSONP dans AngularJS et utiliser avec jQuery Comment changer la couleur de la lettre sur le survol de la souris en JavaScript

jQuery recherche que vous tapez avec ajax

J’essaie de créer une recherche dans laquelle vous entrez du texte dans un champ de texte et onkeyup activera une fonction qui enverra la valeur du champ à une page et renverra les résultats au conteneur div. Le problème que je rencontre est que, lorsque quelqu’un tape, il y a un horrible retard. Je pense que ce qui se passe, c’est que nous essayons de chercher chaque lettre tapée et de faire chaque demande. Comment puis-je faire en sorte que si je tape dans la boîte, attendez 1/2 une seconde (500), si rien n’est saisi, faites alors la recherche en ajax, mais si dans ce laps de temps une autre lettre apparaît, ne le faites pas même déranger avec la demande ajax. Je me suis fait mal à la tête et je n’arrive pas à comprendre. Toute aide est appréciée! 

// fired off on keyup function findMember(s) { if(s.length>=3) $('#searchResults').load('/search.asp?s='+s); }

Cela efface le délai d’attente à chaque pression. Si 1/2 seconde n’est pas écasting, la fonction ne sera pas exécutée, puis réglez une timer sur 500 ms. Ça y est, pas besoin de charger une grande bibliothèque .. 

  $(document).ready(function() { var timeoutID = null; function findMember(str) { console.log('search: ' + str); } $('#target').keyup(function(e) { clearTimeout(timeoutID); //timeoutID = setTimeout(findMember.bind(undefined, e.target.value), 500); timeoutID = setTimeout(() => findMember(e.target.value), 500); }); });

Démo: https://jsfiddle.net/zu2L8f0o/

Le jquery ui autocomplete a cette fonctionnalité.

http://jqueryui.com/demos/autocomplete/

Si vous ne voulez pas utiliser jquery ui, regardez leur code source. 

 function myFunction(inputText) { debugger; var inputText = document.myForm.textBox.value; var words = new Array(); var suggestions = "Always", "azulejo", "to", "change", "an", "azo", "compound", "third"]; if (inputText != "") { for (var i = 0; i < suggestions.length; ++i) { var j = -1; var correct = 1; while (correct == 1 && ++j < inputText.length) { if (suggestions[i].toUpperCase().charAt(j) != inputText.toUpperCase().charAt(j)) correct = 0; } if (correct == 1) words[words.length] = suggestions[i]; document.getElementById("span1").innerHTML = words; } } else { document.getElementById("span1").innerHTML = ""; }