Flexdatalist - Plugin de saisie semi-automatique avec support
le HTML5 élément est très utile dans le développement de front-end moderne. Pourtant, c’est l’un de ces éléments que peu de développeurs connaissent..
Cela fonctionne sur un champ de saisie où vous pouvez autosuggestionner certaines valeurs pour l'entrée. La configuration par défaut semble correcte et nous avons présenté quelques astuces de codage pour créer des effets sympas avec des datalistes autosuggest.
Cependant, il est beaucoup plus facile de travailler avec un plugin tel que Flexdatalist. Il prend en charge un large éventail de navigateurs et vous permet de personnaliser entièrement le design de votre datalist.
Tout le monde n'a pas besoin de fonctionnalités de saisie semi-automatique et avec les datalists HTML5 natifs, vous pouvez ne pas vous embêter avec un plugin. Cependant, Flexdatalist est peut-être le meilleur, car il s'appuie sur les comportements natifs des datalistes ajouter:
- Support réactif mobile
- Descriptions supplémentaires pour chaque article
- Options pour plusieurs sélections à la fois
- Gestionnaires d'événements personnalisés
Ses tous propulsés par jQuery, Ainsi, vous aurez besoin d'une copie de la dernière version pour que ça fonctionne. Ça aussi est livré avec sa propre feuille de style CSS que vous voudrez peut-être combiner en un seul fichier CSS pour réduire le nombre de requêtes HTTP.
Tu peux trouver instructions d'installation complètes sur la page de démonstration principale qui comprend liens de téléchargement vers les fichiers Flexdatalist.
C'est vraiment simple à mettre en place, avec juste une seule ligne de JavaScript. Par défaut, le plugin cible toutes les entrées avec la classe .flexatalisme, il suffit donc d’ajouter cela à votre code pour voir les résultats.
Vous venez d'ajouter le élément dans votre champ de saisie et Flexdatalist s’occupe du reste. Ça va style automatique la liste, y compris un texte descriptif facultatif.
Le moyen le plus simple d’ajouter du texte supplémentaire est via un fichier JSON que vous pouvez attacher à votre entrée via un attribut de données.
Par exemple, si vous consultez la page de démonstration de Flexdatalist, vous trouverez un “Des pays” champ de saisie avec l'attribut data-data = 'countries.json'. Ceci fait référence à un fichier distant qui stocke toutes les données d'entrée brutes en externe.
Trop de ces champs que vous pouvez ralentir un peu la page. Cependant, je ne peux pas imaginer que de nombreux sites exécuteraient plus de quelques-uns de ces formulaires datalist sur une seule page, sans parler de ce plugin jQuery, ils sont toujours assez rapide.
Pour commencer, juste visitez le dépôt GitHub et téléchargez une copie. Cela comprend un lien vers la page de démonstration principale qui contient également une documentation complète sur la configuration, les options JavaScript et de nombreux extraits de code..
