Ce 6ème mini tutoriel aura pour sujet un outil très apprécié des utilisateurs pour son gain de temps et que tout développeur Web s’est vu devoir réaliser un jour : L’autocompletion (ou suggestion de champs). Vous connaissez certainement la bibliothèque d’interface Utilisateur Jquery UI, Elle est peut être lourde (plusieurs centaines de ko le .js) mais elle permet de faire pas mal de choses intéressantes (parmi les plus utilisées : drag and drop de div et le calendrier datepicker).
J’expliquerai comment faire de l’autcompletion en faisant appel à une base de données des villes de France (plus de 36000 villes exactements), en maximisant l’expérience utilisateur et en essayant de limiter ses appels par un système astucieux de mise en cache…
Reaaaaady ???? ?
Pré-requis
Pour exécuter ce tutoriel et lancer vos scripts chez vous, il vous faut :
- Un serveur PHP (local ou hébergement web/serveur dédié)
- Un serveur MySQL (pareil qu’en haut)
- Quelques bases en PHP, SQL et JavaScript
Partie HTML/JQuery
Notre tutoriel va simplement afficher un simple champ input qui listera des villes correspondants à ce que vous aurez écrit. Il vous faudra donc la librairie JQuery + JQuery UI. Vous pourrez utiliser des url directes, ou si vous utilisez un jour dans un projet l’autocompletion et uniquement ça, vous pourrez toujours télécharger le js avec uniquement l’autocomplete par exemple.
Créez le fichier index.html avec le code suivant :
[cce_html]
[/cce_html]
Vous noterez que j’ai tout de même mis un thème JQuery-ui, je vous avez dit que c’était lourd ce truc ! Il existe un thème basique que vous pourrez adapter par rapport au thème de votre site.
Pour le cas du style font-awesome après la balise HTML, ce n’est pas une erreur (enfin une erreur de validation w3c oui ^^), je charge une font après la balise HTML pour optimiser le temps de chargement de ma page web (ça se joue à quelques millisecondes certes). Si vous voulez en savoir plus, rendez-vous sur cette page google-developer.
Maintenant passons au code Jquery que vous placerez à la place de /** autocomplete **/ :
[cce_js]