Une recherche rapide sur Google donnera lieu à de nombreux plug-ins à remplissage automatique: il existe même une option partagée par jQuery UI, fournie avec la bibliothèque. Cependant, aujourd’hui, je souhaite rechercher une solution alternative. Le plugin jQuery Autocomplete publié par DevBridge possède la fonctionnalité exacte que je trouve la plus attrayante.
Les styles mettront automatiquement en évidence les mots lors de la frappe et les résultats apparaîtront dans le menu déroulant en bas. Ce tutoriel est une brève introduction à l'utilisation du plugin en chargeant le contenu d'un tableau JavaScript. Il est possible de charger le contenu Ajax à partir d'un fichier dorsal ou de la base de données. Toutefois, pour ce tutoriel, il est plus facile de travailler avec des données locales. Consultez mon exemple de démo pour avoir une idée de ce que nous essayons de construire.
Live Demo - Télécharger le code source
Création de la page
Une bonne première étape consiste à télécharger une copie du plugin jQuery Autocomplete. J'utilise la version abrégée de mon en-tête, ainsi qu'une copie du dernier script jQuery. Depuis que je conserve toutes les suggestions dans un tableau JavaScript, j'ai également déplacé les scripts personnalisés dans un autre fichier séparé.
Les ressources ne sont pas trop difficiles à installer. Et de même, tout le code HTML est très simple, vous pouvez donc implémenter n’importe quel type de conception de recherche dans votre page et cela devrait fonctionner correctement. J'utilise un conteneur externe avec l'identifiant #searchfield pour centrer la forme entière. Il n'y a pas de bouton d'envoi pour cette démonstration, mais les résultats apparaîtront automatiquement dans le champ de contexte dynamique situé sous l'entrée.
Nous pouvons cibler le champ en utilisant un ID de #autocomplete. Il n'y a pas de code HTML supplémentaire, car toutes les suggestions seront présentées à l'aide de codes JS. Un autre domaine intéressant est le paragraphe utilisant un ID de #contenu de sortie. C'est ici que nous pouvons afficher le choix de l'utilisateur une fois qu'il a cliqué sur une suggestion. Normalement, sur un site Web actif, vous redirigez simplement l'utilisateur vers une page de recherche ou vers la page principale elle-même.
Concevoir avec CSS
Je ne veux pas approfondir les détails, mais nous devrions examiner les styles CSS pour chacune des fonctionnalités de suggestion, ainsi que la zone de saisie principale. La bordure de la boîte et les styles de contenu sont très développés autour de la barre de recherche Design Shack. Chacun des styles de suggestion est basé sur le code par défaut, que j'ai copié dans ma feuille de style.
Si vous souhaitez conserver ces éléments dans une feuille de style distincte, le chargement sera correct. Cependant, j'essaie de combiner des ressources afin de réduire le nombre de requêtes HTTP émises par le navigateur. Les deux premières classes ciblent l'intégralité de la liste de suggestions, ainsi que chaque ligne de suggestion interne. Vous pouvez les personnaliser de la manière qui convient à votre site Web. De plus, le CSS est accompagné d'une classe d'entités sélectionnée pour mettre en surbrillance le texte déjà saisi par l'utilisateur.
Le champ de recherche lui-même ne devrait pas être un problème, indépendamment de votre propre conception. jQuery Autocomplete est conçu pour s’adapter à n’importe quelle largeur, de sorte que toutes les suggestions s’intègrent parfaitement dans la même présentation. Certes, mon exemple prend beaucoup de place sur la page, mais le plug-in le gère parfaitement, sans très nombreuses personnalisations.
Implémenter la saisie semi-automatique
Si vous utilisez un appel Ajax backend pour extraire les résultats de données, vous devrez peut-être exécuter votre propre fonction de recherche. jQuery Autocomplete attend un type de données de réponse tel que XML / JSON. Ces données doivent être renvoyées à partir de PHP, Rails, Python, ASP.NET, etc. Le scénario le plus probable est de rechercher dans votre table d'entrées de la base de données et d'extraire tous messages et leurs URL, puis renvoyez cette liste à votre navigateur.
Ce que j'ai fait est de créer un tableau d'entrées directement dans JavaScript pour les principales devises trouvées dans le monde entier. Lorsque vous commencez à taper le nom du pays ou de la devise, une liste d'éléments suggérés est extraite directement du tableau. La saisie manuelle des données prend beaucoup de temps. Je ne copierai donc qu'une petite partie du tableau pour illustrer la procédure.
Tout ce contenu doit être ajouté avant d'exécuter votre propre fonction dans jQuery. J'ai choisi de conserver le tableau et l'appel de fonction personnalisé dans le même fichier JS. Cependant, vous pouvez choisir de séparer les fonctions des données et de les déplacer dans différents fichiers. Maintenant, le plugin autocomplete nécessite seulement une petite quantité de code par défaut.Je vais copier un exemple de modèle avec mon code de démonstration en direct afin que vous puissiez voir ce que j'ai fait en utilisant les mêmes paramètres.
le Chercher Ce paramètre est utilisé uniquement pour les données locales lorsque nous ciblons un tableau. onSelect déclenche une nouvelle fonction chaque fois que l'utilisateur sélectionne une suggestion. Dans ma démo en direct, nous créons simplement une nouvelle chaîne HTML pour afficher le nom et la valeur sélectionnés de cette entrée. Mais notez bien que ma démo est un exemple très concret de ce qui est possible.
Consultez la documentation relative à la saisie semi-automatique jQuery pour avoir une meilleure idée de certains autres paramètres. Je n'ai même pas commencé à gratter la surface et les développeurs JavaScript peuvent probablement rassembler des exemples en utilisant de nombreux autres paramètres lors de l'appel de fonction. Mais je veux montrer à quel point il est facile de faire fonctionner ce plugin sur votre site web - même en utilisant des données statiques si nécessaire.
Live Demo - Télécharger le code source
Dernières pensées
Si vous n'avez jamais utilisé des suggestions d'auto-complétion, je dois recommander ce plugin. J'ai utilisé plusieurs solutions différentes dans le passé, mais rien ne m'a vraiment marqué jusqu'à maintenant. Et il existe une grande différence entre le chargement de suggestions avec les résultats de page et les résultats de recherche (comme Google Instant).
Avant d’utiliser ce plugin, assurez-vous d’avoir un bon plan pour construire une interface utilisateur qui fonctionne bien. Le plugin jQuery Autocomplete ainsi que tous mes codes sources sont publiés gratuitement sous licence MIT, vous êtes donc libre de l'utiliser pour tout projet!