picture picture
septembre 21, 2017 JavaScript, MySQL, PHP 1 Commentaire

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>
									

NB : n’oubliez pas de personnaliser le chemin du dossier « jquery-ui »

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 :wink: ) :

<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 8) !

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.

 

One Response to “Autocomplétion du champ de texte avec JQuery-UI”

One Trackback

  1. […] par le moteur JavaScript JQuery-UI. Nous en avions parlé dans un article précédent (cf. Autocomplétion du champ de texte avec JQuery-UI) : cet outil est un peu une « usine à gaz » mais les résultats sont néanmoins assez […]

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: