Bonjour,
Je vais vous expliquer comment faire facilement un système d’autocomplétion avec jQuery. Les données seront stockées en base de données.
Tout d’abord, pour ne pas réinventer la roue, je vous propose d’utiliser un plugin jQuery d’autocomplétion (site web). Je le préfère à celui de jQuery UI qui lui est en revanche plus populaire.
Nous allons donc utiliser celui du premier lien. Il faut tout d’abord télécharger le JS et le CSS.
Mise en place
On n’oublie pas de charger jQuery :
<link type="text/css" rel="stylesheet" href="css/jquery.autocomplete.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
Vous créez ensuite votre input le plus simple du monde :
Tapez une lettre : <input type="text" id="langages" />
Et vous appelez le plugin dessus :
$(document).ready(function() {
$('#langages').autocomplete('fichier.php');
});
On lui indique quel fichier appeler en Ajax, ce dernier va se charger de récupérer la valeur entrée par l’utilisateur (contenue dans $_GET['q']), de se connecter à la base de données, faire la requête SQL et d’afficher d’éventuels résultats.
Voici le PHP :
<?php
// si on reçoit une donnée
if(isset($_GET['q'])) {
$q = htmlentities($_GET['q']); // protection
// connexion à la base de données
try {
$bdd = new PDO('mysql:host=localhost;dbname=nom_bdd', 'root', '');
} catch(Exception $e) {
exit('Impossible de se connecter à la base de données.');
}
// écriture de la requête
$requete = "SELECT nom FROM langages WHERE nom LIKE '". $q ."%' LIMIT 0, 10";
// exécution de la requête
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
// affichage des résultats
while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
echo $donnees['nom'] ."\n";
}
}
?>
Si vous avez des attentes particulières, regardez du côté des options du plugin.
Vous pouvez personnaliser certains choses comme par exemple :
- remplir l’input automatiquement à chaque sélection de proposition
- envoyer des paramètres $_GET supplémentaires au fichier PHP
- rendre la sélection sensible à la casse
- etc.
Démo
Voilà, ce n’est pas plus compliqué que ça, j’ai mis en ligne une démo pour vous montrer ce que ça donne. J’ai enregistré en base de données différents noms de langages de programmation, je vous laisse essayer quelques lettres. 
Loading ...
Créer une application avec Flex 4
Insérer des données d’un fichier Excel ou Access dans MySQL
15 commentaires
LostUniverse
18 janvier 2012 à 19:14 (UTC 1) Lier vers ce commentaire
Excellent didacticiel, merci beaucoup ! Je cherchais depuis quelques temps un tel exemple, j’ai enfin compris comment fonctionne l’autocomplétion !
cari
29 mars 2012 à 16:43 (UTC 1) Lier vers ce commentaire
bonjour,
j’ai essayé d’executer votre code ça ne marche pas
pour le plugine jQuery qu’on télécharge on l’enregistre ou?
pareil pour les deux fichiers JS et CSS
si vous pouvez m’aider SVP
Merci
Syl
29 mars 2012 à 19:29 (UTC 1) Lier vers ce commentaire
Bonjour cari,
Je ne pratique pas le support sur le blog, ce n’est pas fait pour cela. En revanche je te recommande de décrire ton problème à cet endroit tout en étant le plus précis possible.
Alex
19 avril 2012 à 11:18 (UTC 1) Lier vers ce commentaire
Effectivement, ce code fonctionne très bien.
Toutefois, y a-t-il possibilité de détecter le moment ou on clique sur une des valeurs de l’autocomplétion?
J’ai besoin de cela pour faire une action dès que la valeur du textbox change.
Syl
19 avril 2012 à 12:38 (UTC 1) Lier vers ce commentaire
Tu donnes la réponse dans ta question. :)
$('#langages').on('change', function() {});
Alex
23 avril 2012 à 11:29 (UTC 1) Lier vers ce commentaire
Bonjour,
tout d’abord merci, ça marche super bien.
toutefois, je rencontre un petit problème, pour certaines valeurs sélectionnées, la textBox se remplit et se vide très rapidement. En gros après sélection parmi les choix proposés, je n’ai rien dans la textbox, je n’arrive pas à déterminer à quoi ce bug est dû ! ce bug a tendance à être récurrent lorsque les données affichées sont grandes (en longueur de caractères) mais même après avoir augmenté la maxLenght, et la width, le problème persiste.
Merci d’avance pour la réponse.
Syl
23 avril 2012 à 11:42 (UTC 1) Lier vers ce commentaire
Alex, je te renvoie à ma réponse au commentaire de cari que tu retrouveras plus haut.
herve
9 mai 2012 à 14:47 (UTC 1) Lier vers ce commentaire
Bonjour,
Je viens de tester votre code, très très bien. Par contre, je voudrais l’utiliser dans un formulaire, et j’ai un conflit avec la connection PDO générale de la page. Sur ma 1er page j’ai une connection avec la base et une deuxième avec votre fichier Search.
J’espère que vous comprenez mon problème.
La persistance n’est pas assurez pour la connexion avec la base sur ma premiere page et la page Search..
Merci pour votre réponse.
Syl
9 mai 2012 à 14:51 (UTC 1) Lier vers ce commentaire
Bonjour, rien ne t’empêche de mettre le code PHP sur la même page. :)
herve
9 mai 2012 à 21:35 (UTC 1) Lier vers ce commentaire
Il est inclut dans la page, mais c’est pareil …par contre, ta page contact ne marche pas sur ton site …
Syl
9 mai 2012 à 21:56 (UTC 1) Lier vers ce commentaire
Comme dit dans mes précédentes réponses, mon site n’est pas une plateforme de support, utilise les forums pour cela. Mon formulaire de contact fonctionne bien je viens de l’essayer à l’instant. :)
herve
10 mai 2012 à 05:25 (UTC 1) Lier vers ce commentaire
j’avais compris pas de problème … Sinon quelqu’un a–t-il déjà utilisé ce code dans un formulaire inclus avec d’autres connexions à la base de donnée ? Me concernant, il y a duplication de la connexion à la base et ça ne marche pas (principalement parce que l’include search utilise une connexion à la base de données). Merci pour vos réponse ou exemples.
Syl
10 mai 2012 à 08:22 (UTC 1) Lier vers ce commentaire
Ne te connecte pas à la base de données dans l’include alors.
herve
16 mai 2012 à 13:30 (UTC 1) Lier vers ce commentaire
Bonjour Syl, je viens de sortir la connexion de la base : $bdd = new PDO en dehors sur la page général et ca fonctionne pas ? Est-ce que des utilisateurs ont déjà ces problèmes sur ce script ?
Syl
16 mai 2012 à 15:06 (UTC 1) Lier vers ce commentaire
Bonjour, je ne répondrai plus aux questions d’ordre technique. J’ai déjà expliqué pourquoi.