Autocomplétion du champ de texte avec JQuery-UI
L’auto-complétion consiste à proposer une pré-sélection de valeurs dans le champ texte d’un formulaire.
Ces valeurs sont extraites à la volée d’une base des données, et contiennent le caractère (ou la chaîne de caractères) déjà saisi par l’utilisateur.
Cette fonction utilise AJAX (JavaScript + PHP), c’est à dire qu’il n’est pas nécessaire de recharger une page pour extraire dynamiquement et afficher les valeurs souhaitées depuis une base des données. Le moteur utilisé dans cet exemple est JQuery-UI (puissant JavaScript opensource)
1ere étape
Installer sur le serveur les fichiers du moteur JQuery-UI (la fonction d’autocomplétion est incluse, entre autres)
Vous pouvez les télécharger ici.
Il suffit ensuite de les décompresser et d’installer le dossier « jquery-ui » à l’emplacement de votre choix sur la racine de votre site internet. Dans l’exemple qui suit, j’ai installé le dossier « jquery-ui » directement sur la racine du serveur.
2nde étape
Il est maintenant nécessaire de faire un lien entre, d’une part les fichiers Javascripts et CSS de JQuery-UI, et d’autre part votre page web.
Vous pouvez tout insérer entre la balise <head> et </head>.
Personnellement je préfère mettre la partie JavaScript en bas de la page, pour éviter de ralentir le chargement de l’affichage avec ce code lourd (qui n’est pas utilisé immédiatement) :
<!-- entre la balise <head> et </head> -->
<link type="text/css" href="jquery-ui/css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<!-- en bas de la page HTML, juste avant </body> -->
<script type="application/javascript" src="jquery-ui/js/jquery-1.9.1.js"></script>
<script type="application/javascript" src="jquery-ui/js/jquery-ui-1.10.3.custom.js"></script>
3ème étape
Si ce n’est fait, vous créez la table de donnée des valeurs que vous souhaitez voir apparaitre en présélection dans le champ de texte du formulaire. Pour faire simple, j’ai créé une table nommée « autocomplete » avec 2 champs :
- un champ INT pour la clé primaire nommé « id »
- et un champ de texte VARCHAR nommé « code », dans lequel j’ai stocké toutes les valeurs possibles de la présélection
CREATE TABLE IF NOT EXISTS `autocomplete` (
`id` mediumint(11) unsigned NOT NULL,
`code` varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='table de test atocompletion';
--
-- Contenu de la table d'autocomplétion
--
INSERT INTO `autocomplete` (`id`, `code`) VALUES
(1, 'GEOGRAPHIE'),
(2, 'HISTOIRE'),
(3, 'MATHEMATIQUES'),
(4, 'FRANCAIS'),
(5, 'LATIN');
NB : il s’agit ici d’un exemple : vous pouvez stocker les valeurs de cette préselection dans n’importe quel champ de n’importe quelle table, à condition qu’il soit de type VARCHAR ou TEXT.
4ème étape
Vous allez ensuite créer le formulaire dans lequel vous souhaitez insérer la fonctionnalité d’autocomplétion. Pour que la mise en forme de JQuery-UI soit appliqué, il est nécessaire de marquer la boîte (calque, paragraphe, etc.) d’affichage du champ de saisie avec l’ID : « box ». Exemple :
<form action="***.php" method="post">
[...]
<p id="box"><input type="text" id="code" name="code" /></p>
[...]
<p><input type="submit" /></p>
</form>
NB : n’oubliez pas de personnaliser le fichier de traitement ***.php de votre formulaire .
5ème étape
Ce formulaire va maintenant devoir communiquer avec un fichier PHP d’extraction à la volée des chaines de caractères incluant les données saisies par l’utilisateur. C’est le travail de JavaScript via le moteur JQuery-UI que vous venez d’installer.
Vous allez donc rajouter SOUS le bloc de code de la seconde étape (en bas de page, si vous avez bien lu 
) :
<script type="application/javascript">
$(function(){
$("#code").on('input', function() {
$("#code").autocomplete({source: 'autocomplete.php?req='+$("#code").val()});
});
});
</script>
NB : Attention à bien personnaliser le nom du fichier de traitement PHP (« autocomplete.php » dans mon exemple : voir 6ème étape), et le nom du champ avec les valeurs de préselection (« code » dans mon exemple)
6ème étape
Il vous reste à créer le fichier PHP qui va extraire en boucle les données de la table à la volée, au fur et à mesure de la frappe dans le champ de texte. Je l’ai nommé « autocomplete.php » :
<?php
try {
$bdd = new PDO('mysql:host=***hôte***;dbname=***nom de la base***', '***identifiant***', '***mot de passe***');
}
catch (Exception $e) {
die('Erreur : '.$e->getMessage());
}
$reponse = $bdd->prepare('SELECT * FROM autocomplete WHERE code LIKE :req');
$reponse->execute(array('req' => '%'.$_GET['req'].'%'));
$liste = array();
while($donnees = $reponse->fetch()) {
$a = count($liste);
// formatage de l'affichage des données de la liste
$liste[$a] = $donnees['code'];
}
echo json_encode($liste);
?>
NB : n’oubliez pas de personnaliser les identifiants de connexion *** à votre table, et les noms de la table et du champ (respectivement « autocomplete » et « code » dans l’exemple ci-dessus)
Voilà : c’est fini 
!
En complément
Le site de JQuery-UI fournit des dizaines de personnalisation pour cette fonction d’auto-complétion, avec tutoriels et exemples, que vous trouverez ici.
Vous pouvez, par exemple, modifier la taille de la liste des suggestions de la présélection dans le fichier « jquery-ui-1.10.3.custom.css », en modifiant les valeurs de la classe CSS « .ui-widget » …
Vous pouvez également y télécharger la dernière version du moteur JavaScript.
@bigot : Cela ne concerne plus l’autocomplétion…
Ce que vous cherchez à faire maintenant est juste de l’affichage simple en bouche d’un export de base de donnée comportant plusieurs lignes d’exports : http://www.lephpfacile.com/cours/13-afficher-les-donnees-de-votre-base
Bonjour,
Votre tutoriel m’a beaucoup servi pour l’autocompletion du champ de recherche.
Je vous remercie.
J’aurais maintenant souhaité afficher dynamiquement les résultats correspondants à une recherche spécifique qui comporte plusieurs réponses.
Sauriez-vous où je peux trouver un exemple tel ?
D’avance merci.
Gérald
Bonjour,
Je suis en trin de mettre à jour un site pour un intranet, ça fais très longtemps que je n’ai pas mis le nez dans la programmation et je galère un peu.
En suivant la procédure j’ai réussi a faire marcher l’autocomplétion grâce à ce tuto que je trouve au top, merci !
La page qui me concerne est un formulaire assez simple (avec pour but d’être intuitif au possible), il comporte plusieurs champs Nom/Prénom .. j’arrive à faire l’appel du nom dans ma BDD et ainsi avoir les différentes possibilités, maintenant j’aimerais savoir s’il est possible d’appeler les autres champs afin de pouvoir les utiliser en direct dans le formulaire et ainsi avoir possibilité de les traiter, les modifier par la même ..?
Merci par avance
Cordialement
AposT