Mettre en une autocomplétion sur son site avec jQuery

Par

18 décembre 2012

Aujourd’hui nous allons voir comment mettre en place sur votre site une autocomplétion avec jQuery.

Si vous ne savez pas ce qu’est une Autocomplétion (ou Autocomplète pour les anglais) détrompez-vous ! Vous l’avez certainement utilisé et souvent même parfois par jour !

Le célèbre moteur de recherche Google vous propose une autocomplétion avec son Google Suggest ! Quand vous tapez les premières lettres de mot il vous propose des mots contenants les caractères déjà saisis ! C’est ça l’autocomplétion !

Maintenant on va voir comment faire votre propre AutoComplétion avec vos propres données pour donnée un réel sens.

Tout d’abord il vous faudra télécharger la version de jQuery que vous trouverez sur le site officiel ici : http://jquery.com/download/

Intégrer votre fichier jQuery dans votre code source avec cette ligne (adapter le nom de votre fichier) :

    <script type="text/javascript" src="/web/js/jquery-1.7.2.min.js"></script>

A l’intérieur de vos balises <body> créons un form avec un input qui servira de base pour l’autocomplétion

<form>
      <input type="text" name="client" id="nom_client" />
</form>

Maintenant il nous fait initialiser l’autocomplétion comme ceci (pensez à bien placer le script en fin de code) :

<script>
      $('#nom_client').autocomplete({
          source: 'client.php',
          autoFocus : true,
          minLength: 1,
      )};
</script>

Définition de nos options :

autoFocus : Permet de mettre en évidence le choix sur l’autocomplétion
minLength : A partir de combien de caractères se déclenche la recherche pour fournir la liste d’autocomplétion
source : Définit à partir d’où vas t’on trouver les résultats

En l’occurrence, notre source ici est le fichier client.php qui va renvoyé au script une liste de résultat à partir du mot tapé.

Voyons voir le fichier client.php

<?php

if (isset($_GET['term']))
{
    include ('../../../config/config_init.php');
    $secure = htmlspecialchars($_GET['term']);
    $result = $bdd->query('SELECT name as label, id FROM partners WHERE name LIKE "%'.$secure.'%" ORDER BY name LIMIT 25');
    $result = $result->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($result);
}

De mon côté je me permet de faire l’include du fichier config_init.php qui contient les informations de connexion à la base de donnée sinon la variable $bdd ne marcherai pas.

Maintenant vous disposez de tous les éléments pour jouer avec le plugin autocomplete de jQuery.

A vos claviers !!!!