Autocomplétion avec jQuery et MySQL

Dernière mise à jour : juin 2014

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 puissant, personnalisable, et surtout maintenu.

Pour le télécharger, il faut récupérer le contenu de ce fichier et l’ajouter dans un fichier nommé jquery.autocomplete.min.js.

Mise en place

On n’oublie pas de charger jQuery en premier :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.min.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({
		serviceUrl: 'fichier.php',
		dataType: 'json'
	});
});

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['query']), de se connecter à la base de données, faire la requête SQL et de renvoyer les éventuels résultats.

Voici fichier.php commenté :

<?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=test', 'root', '');
		} catch(Exception $e) {
			exit('Impossible de se connecter à la base de données.');
		}

		// Requête SQL
		$requete = "SELECT * FROM langages WHERE nom 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'];
		}

		// On renvoie le données au format JSON pour le plugin
		echo json_encode($suggestions);
	}
?>

On ajoutera un peu de CSS pour l’affichage des suggestions :

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }

Si vous avez des attentes particulières, regardez du côté des options du plugin.

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. ;)

Vous aimerez aussi...