Voici quelques éléments de requête jQuery pour un champ de recherche qui, à mon avis, est un anti-modèle, et je suis sûr qu’il existe une bien meilleure solution pour laquelle j’aimerais être orientée:
Je vais le décrire dans les commentaires, puis simplement donner le code, car les commentaires peuvent être plus clairs et simples que le code:
Le code:
// set up a filter function call on keypress. $('#supplier-select-filter').keypress(function (){ // Currently, resets a delay on an eventual filtering action every keypress. filterSuppliers(.3, this); }); // Delayed filter that kills all previous filter request. function filterSuppliers(delay, inputbox){ if(undefined != typeof(document.global_filter_sortinggger)){ clearTimeout(document.global_filter_sortinggger); // clearTimeout any pre-existing pointers. } // Use a global to store the setTimeout pointer. document.global_filter_sortinggger = setTimeout(function (){ var mask = $(inputbox).val(); $('#user_id').load("supplier.php?action=ajax_getsuppliers_html&mask="+escape(mask)); }, 1000*delay); // Finally, after delay is reached, display the filter results. }
Sur une zone de saisie où un terme de recherche peut comporter 10 caractères en moyenne, il faut 10 appels à setTimeout en une demi-seconde, ce qui semble être un processeur lourd, et dans mes tests, certains problèmes de performances se posent, alors j’espère qu’il y a un nettoyeur alternative?
.load () est plus simple que de prendre JSON puis de générer du HTML à partir du JSON, mais peut-être qu’il existe un meilleur outil?
.keypress () ne semble pas toujours déclencher sur des choses comme la suppression de retour arrière et autres éléments essentiels, alors peut-être qu’utiliser keypress () sur cette zone de saisie n’est pas l’idéal?
J’utilise fréquemment l’approche suivante, une fonction simple pour exécuter un rappel, une fois que l’utilisateur a cessé de taper pendant un laps de temps spécifié:
$(selector).keyup(function () { typewatch(function () { // executed only 500 ms after the last keyup event. }, 500); });
La mise en oeuvre:
var typewatch = (function(){ var timer = 0; return function(callback, ms){ clearTimeout (timer); timer = setTimeout(callback, ms); }; })();
Je pense que cette approche est très simple et qu’elle n’implique aucune variable globale.
Pour des utilisations plus sophistiquées, jetez un oeil au plugin jQuery TypeWatch .
Jetez un coup d’œil à l’excellent plug-in Text Change Event de Zurb, fournisseur des produits jQuery de la plus haute qualité.
C’est un moyen plus efficace de le faire, sans utiliser le plugin:
var timeout; $('input[type=text]').keypress(function() { if(timeout) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(myFunction, 5000) })