mercredi 6 mars 2013

[Tuto] Autocomplétion avec jQuery et MySQL

07:40  Admin  7 commentaires

Salut tout le monde,
Bienvenue sur ce tutoriel, aujourd'hui on va essayer de créer un formulaire en utilisant jQuery. Ce formulaire  recherche dans une base de donnée et vous renvoie les résultats immédiatement.
On prend l'exemple de recherche d'un membre dans la bdd.


--

-- Structure de la table `users`

--



CREATE TABLE IF NOT EXISTS `users` (

  `id` int(6) NOT NULL AUTO_INCREMENT,

  `username` varchar(255) NOT NULL,

  `password` varchar(255) NOT NULL,

   PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;



--

-- Contenu de la table `users`

--



INSERT INTO `users` (`id`, `username`, `password`) VALUES

(1, 'user', ' e10adc3949ba59abbe56e057f20f883e'),

(2, 'user2', ' e10adc3949ba59abbe56e057f20f883e'),;
Si vous vous demandez pourquoi il y'a tout ce baratin dans le champ `password`, n'ayez pas peur, c'est équivalent à `123456` après le cryptage grâce à la fonction MD5(). Donc on a crée notre base donnée, vous pouvez égalent utiliser vos bdd qui existent déjà à condition de changer les champs et les tableaux dans le code selon votre choix.. On passe à la partie Html d'abords, la partie la plus facile. On aura besoin d'un formulaire seulement. 
 <!DOCTYPE html> 

<html lang="fr">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

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

<title>Autocomplet Demo</title>



 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>



<script type="text/javascript">

$().ready(function() {

    $("#username").autocomplete("autocomplet.php", {

        width: 260,

        matchContains: true,

        //mustMatch: true,

        //minChars: 0,

        //multiple: true,

        //highlight: false,

        //multipleSeparator: ",",

        selectFirst: false

    });

        </script>
        </head>

<body>

<h2>Recherche</h2>

        <form  method='post'>

    <table width='303' >

  <tr>

  <td width='109'>Nom d'utilisateur</td>

  <td width='178'><input type='text' name='username' id='username'/></td>

  </tr>



</table>

</form>

</body>

</html>
Pour la partie jquery de ce fichier, il y'a une seule fonction autocomplete(). Son rôle est de récupérer ce que l'utilisateur a rempli afin de l'envoyer à la bdd pour le traiter grâce au fichier `autocomplet.php` N'oubliez pas de préciser le sélecteur "#username" pour le champs où vous utiliserez la fonction de l'autocomplete,  et le fichier "autocomplet.php" aussi. Le ficiher `autocomplet.php` nous permet de communiquer avec la bdd, à fin d’accéder aux résultats et les afficher ensuite. Donc voilà le contenu du fichier autocomplet.php : 
<?php

include("includes/db_connect");// le fichier de connexion à la base de donnée

$q = $_GET["q"];

if (!$q) return;

$query = mysql_query("SELECT uerename FROM users WHERE username LIKE '$q%' LIMIT 10");

while($row = mysql_fetch_array($query)) {

    $username = $row['username'];

   

    echo "$username\n";

}

?>
Je vous explique ce qui est écrit en haut : D'abords on se connecte à la base de donnée, puis on récupère le contenu du formulaire de recherche avec $_GET, qui est envoyé par la fonction jquery autocomplete(). Puis on cherche dans la table users sur des résultats correspondant à la recherche, on affiche 10 seulement. Vous pouvez modifier le nombre de résultats, il suffit de changer '10' par le nombre que vous voulez. Donc on arrive à la fin de notre tutoriel, le formulaire est complétement prêt. Vous trouvez tous les fichiers dans le lien de téléchargement.

Catégorie: ,

7 commentaires:

Bonjour,
Fonctionne chez moi après la fermeture de la balise <'script'> avant le sa pourra peut être aider certaine personne.

Ah oui t'as raison, j'ai oublié de fermer le tag script
Merci

Bonsoir,

Voilà j'ai récupéré votre code, je l'ai adapté à ma BDD et j'ai corrigé l'oublie de la balise Script.

Tout a marché sans soucis. Mais quelque heure après, je relance et là rien ne marche.

J'ai cette erreur sur chrome : Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/Users/Tiphanie/Desktop/autocompletion/js/autocomplete.js.

Une idée ?

Merci

Bonsoir Tiphanie,
Est ce que t'as essayé de lancer ce script à partir d'un serveur local ou directement en ouvrant la page chrome ?
T'as pas modifié l’emplacement du fichier autocomplete.js?

Merci pour la réponse.

Directement en ouvrant la page Chrome. ce qui m'étonne, c'est que ca a fonctionné mais que après quelques heure, plus rien. Non j'ai pas modifié l'emplacement : src="js/autocomplete.js"

Salut. désolé de déterrer le sujet mais j'essaye tant bien que mal à faire fonctionner ce script mais cela ne fonctionne pas.
j'ai regardé niveau bdd la connexion est ok etc...
j'ai vu cependant que tu fais appel à src="js/autocomplete.js" mais dans l'archive ce n'est pas le même nom ???

ensuite la variable $_GET['q'] dans autocomplet.php proviens de ou ? car la seule déclaration envoyée dans js c'est username.

Peut tu m'éclairer. ça serait cool que j'arrive a le faire tourner :D
merci d'avance.

Salut Steeve,
Modifies "src='js/autocomplete.js' " par "src='js/jquery.autocomplete.js' ", et utilises la dernière version du jquery
Assures toi que tu as le meme id (#username et id="username" içi) dans la ligne 23 et 57 dans le fichier index.html

$("#username").autocomplete("autocomplet.php"

< i nput type='text' name='username' i d='username' />

Bonne chance

Enregistrer un commentaire