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][/cce_js]

La particularité de ce script, c’est que dans « source: », je vérifie si le terme recherché n’existe pas déjà dans un tableau avec sa liste de résultats. Si c’est le cas je charge la liste enregistrée, sinon j’appelle « city.php » et je stocke à son tour les résultats dans le tableau…

Partie PHP

Le script PHP va ouvrir une connexion SQL et rechercher le terme envoyé pour lister les noms des communes qui correspondraient dans un tableau JSON. J’utiliserai une connexion PDO car mysql_connect est dorénavant une méthode dépréciée depuis PHP 5.5.0 (il faut utiliser PDO ou mysqli_connect).

Avant tout, il faut s’occuper de la base de données :

• Créez une nouvelle base de données nommée « france » en utf8_general_ci
• Créez un utilisateur qui aura accès à la base de données (ou utilisez root).
• Importez ensuite ce fichier SQL qui contient les 36000 communes. (récupérée sur la base de l’insee).

Maintenant créez votre fichier city.php dans le même répertoire qu’index.html :

[cce_php][/cce_php]

Le code affichera donc soit un tableau vide ou rempli. J’y ai ajouté la réponse HTTP utile http_response_code() qui renverra 200 (= OK) ou 500 (= Error), ce qui permettra de gérer votre réponse partie JavaScript avec $.ajax() au niveau du « success: » et du « error: ».

C’est terminé ! Votre script devrait afficher une jolie liste déroulante sous votre champ input de ville, et stocker l’id dans un champ input hidden (plus pratique de récupérer l’id de la ville à la validation du formulaire ^^).

Démo et code source

Testez-vous même le code depuis l’iframe ci-dessous en écrivant les 2 premières lettres d’une ville ???? ! Pour le code source complet c’est par là : city-autocomplete.zip