Share
L'effet de recherche en direct n'est pas une nouveauté dans les applications de bureau. Sous Mac OS X ou Windows Vista / 7, il vous suffit de saisir quelques lettres dans un champ de recherche, vous obtenez presque instantanément le résultat de la recherche à la volée. Devoir appuyer sur le bouton de soumission devient une vieille école.
Ce tutoriel va vous montrer comment amener cet effet cool dans le monde web avec jQuery. Le code utilisé dans ce tutoriel est modifié en fonction de l'approche de John Resig..
Effet Livesearch dans Windows 7
Effet Livesearch sous OS X
Pour commencer, nous avons besoin de quelques éléments HTML, notamment:
… Et deux bibliothèques javascript:
Dernier point mais non le moindre, nous avons besoin de certains éléments pour effectuer une recherche. Dans ce tutoriel, utilisons les noms de nombreux frameworks Web en tant que données factices, OK? (Voir la liste de ces frameworks)
Les données de "recherche à partir de" peuvent être fournies dans des tableaux, des JSON ou n'importe quel formulaire, à condition qu'elles puissent être bouclées en javascript. Les tableaux multidimensionnels peuvent également être utilisés. Mais pour faciliter la démonstration et la compréhension, les données utilisées dans ce tutoriel sont un tableau simple à une dimension appelé "éléments"..
Et enfin, voici le code HTML. Faites attention à l'endroit où les deux bibliothèques JS sont incluses. Remarque: css n’est pas l’élément clé de cet effet, nous ne perdrons donc pas une seconde pour le style. Ils sont minifiés. J'espère que cela ne vous dérangera pas et ne vous distraira pas. Concentrons-nous sur HTML et JS.
Enregistrez le code suivant dans un fichier html et commençons!
Effet jQuery Livesearch Démo de jQuery Livesearch
Trouvez votre cadre Web préféré
<-- Type in here and get search results LIVE!
En tant que gars javascript, vous ne pouvez pas vivre sans Firebug aujourd'hui. C'est vraiment un must pour tous ceux qui travaillent avec jQuery. Vous pouvez compléter ce didacticiel sans installer Firebug. Mais avec Firebug, nous sommes en mesure de voir beaucoup de choses dans les coulisses, ce qui est essentiel pour comprendre la recherche dans cet effet..
Rappelez-vous les objets factices à partir desquels effectuer une recherche Oui, les noms de framework. Voyons si elles sont au bon endroit avec Firebug:
Vous devriez voir quelque chose montré dans l'image ci-dessous. Firebug affiche la variable "items" qui est un tableau. Oui, nos noms de cadre sont exactement là. Continuons!
Parlons maintenant de la logique. Pour que cet effet fonctionne, une séquence de choses doit se produire:
Facile, hah? Sauf pour une chose. Si je recherche un cadre appelé "cake", la logique ci-dessus s'exécute, un cycle par lettre, 4 cycles au total, non? Mais les 3 premiers cycles ne sont absolument pas nécessaires pour réduire les performances de manière significative. Pour atténuer cela, nous attendrons que l'utilisateur arrête de saisir avant de lancer notre logique. Et si un utilisateur arrête de taper pendant 0,2 seconde, nous supposons qu'il a terminé. À ce stade, notre logique est assez délicate. Il est temps de vous salir les mains et de commencer à coder!
Dans la vraie vie, l'écoute peut être extrêmement importante. Ceci est également vrai dans le monde de jQuery, où tout commence par l'écoute d'un événement.
Recherchez "placeholder" dans le fichier HTML. Mettez le code suivant à cet endroit.
Le code suivant écoute l'événement keyup. Jetez-les entre lese
Accentsconagua