Vous êtes sur la page Blog

Autocomplétion : réaliser un formulaire de recherche avec PHP, MySQL et du JQuery

Rédigé par fab1 aucun commentaire

Lorsque l'on réalise des formulaires, cela peut être bien utile de profiter de l’auto-complétion un service que l'on trouve rapidement pratique puis tout simplement indispensable ! Pour rappel l’auto complétion, permet d'aller beaucoup plus vite car le formulaire est capable de faire des suggestions en fonction de ce que vous tapez dedans. Ainsi si je commence à taper "inf" le formulaire sera capable d'afficher "informatique", cela permet de gagner du temps mais aussi de se faire guider, ce qui peut parfois être bien pratique lorsque le site devient compliqué par exemple. Le résultat de ce tutoriel donne alors quelque chose qui ressemble à quelque chose comme ça :

C'était un rapide rappel pour tous ceux qui ne savent pas ce qu'est, d'ailleurs le principe de l’auto complétion on le retrouve partout ... Dans nos IDE de développement qui sont capables de beaucoup de choses comme de terminer le nom d'une fonction, avec Google sur son moteur de recherche, et même dans Word ...

Dans ce tutoriel, nous allons voir comment exploiter les données d'une base de données, avec l’auto complétion active sur le champ Pays de notre formulaire, bien pratique ! Dans un premier temps il faut donc réaliser la page PHP ou HTML suivante qui récupère le fichier JQuery nécessaire au bon fonctionnement de l’auto complétion.

Une fois le fichier JQuery et aussi le plugiciel JQuery Autocomplete qui sera lui aussi indispensable au bon fonctionnement de ce petit tutoriel sur l’auto complétion. Il vous faudra aussi un peu de style pour mettre en forme les différents résultats via une petite feuille de style.

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.autocomplete.min.js"></script>

<style>
.autocomplete-suggestions { border: 1px solid #999; background: #f4eaea; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #f24b58; }
</style>

<p>Entrez le nom d'un pays : <input type="text" id="pays" /></p>

<script>
$(document).ready(function() {
    $('#pays').autocomplete({
        serviceUrl: 'bdd.php',
        dataType: 'json'
    });
});

</script>

Avec le code source précédent qui regroupe le JavaScript, le CSS et une petite partie HTML, nous avons donc un petit formulaire s'occupe de récupérer la valeur saisie par l'utilisateur, il ne faudra pas oublier de lui donner le bon identifiant pour le lier avec votre code JQuery. Le JavaScript s'occupe alors d'aller chercher les données via le fichier bdd.php qui doit se trouver au bon emplacement pour que cela fonctionne.

Maintenant que nous avons la partie JQuery, HTML et CSS, il est possible de s'attaquer au PHP qui va interroger la base de données en direct via le JavaScript précédemment défini. Il faudra bien vérifier que votre base de données contenant vos précieuses informations est bien accessible pour cette page PHP, tout comme pour votre requête SQL qui devra pointer sur la bonne table.

<?php
    if(isset($_GET['query'])) {
        // Mot tapé par l'utilisateur
        $q = htmlentities($_GET['query']);
 
        // Connexion à la base de données
        try {
            $bdd = new PDO('mysql:host=localhost;dbname=nomdelabase', 'root', '');
        } catch(Exception $e) {
            exit('Impossible de se connecter à la base de données.');
        }
 
        // Requête SQL
        $requete = "SELECT nom_fr_fr FROM pays WHERE nom_fr_fr LIKE '". $q ."%' LIMIT 0, 10";
 
        // Exécution de la requête SQL
        $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
 
        // On parcourt les résultats de la requête SQL
        while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
            // On ajoute les données dans un tableau
            $suggestions['suggestions'][] = $donnees['nom_fr_fr'];
        }
 
        // On renvoie le données au format JSON pour le plugin
        echo json_encode($suggestions);
    }
?>

Pour que cet exemple fonctionne, il vous faut les données correspondantes dans votre base de données, sinon l’Auto-complétion ne vous reverra aucun résultat ... Vous devez donc vous rendre sur cette page pour récupérer la table pays pour votre base de données MySQL :

Classé dans : Tutoriel Javascript

Écrire un commentaire