10

Tutorial : suggestions (auto-complétion) en Ajax avec JQuery et Php

le 28 avril 2009

tags tags : , , , ,

Pour ce deuxième tutoriel sur l’ajax, je te propose un formulaire avec auto-complétion. Simplement afficher des suggestions quand l’utilisateur commence à taper dans un champ de texte. Les suggestions sont affichées grâce à Ajax qui permet d’effectuer des requêtes SQL en « arrière-plan » de la page. Toute la partie JavaScript sera faite grâce au framework JQuery.

auto-completion avec Ajax et Jquery

Comme d’hab, j’ai préparé une page de démo du script : disponible ici. Et il est également possible de télécharger les fichiers sources de cette démo. Et bien sûr, tout le code présenté ici est dépouillé de toute mise en forme (libre à toi de le personnaliser après !).

Jquery : auto-complétion

Donc, pour commencer, on va préparer le code HTML nécessaire : le champ de texte sur lequel les suggestions vont être appliqué et le bloc (caché au début de la page) qui va éventuellement contenir les suggestions :

1
2
3
4
5
6
7
8
9
10
11
12

<div>
		Rechercher un pays :
		<br />
		<input type="text" size="30" value="" id="inputString" /><!--  champ texte à analyser pour les suggestions -->
</div>
 
<div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
		<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <!-- image de la fleche vers le haut -->
		<div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions -->
			&nbsp;
		</div>
</div>

Ensuite, dans le code javascript, on retrouve les deux fonctions nécessaires : lookup qui permet de faire l’appel ajax et fill qui permet, comme son nom l’indique, de remplir le champ avec la valeur suggerée. Après avoir défini les deux fonctions, on ajoute les « écouteurs » (qui permettent de surveiller si un événement est effectué) avec keyup (quand on appuie sur le clavier, à la remontée de la touche) et blur (quand le champ texte perd le focus).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function lookup(inputString) {
		if(inputString.length == 0) { // si le champs txte est vide
			$('#suggestions').hide(); // on cache les suggestions
		} else { // sinon
			$.post("ajax.php", {queryString: ""+inputString+""}, function(data){ // on envoit la valeur du champ texte dans la variable post queryString au fichier ajax.php
				if(data.length >0) {
					$('#suggestions').show(); // si il y a un retour, on affiche la liste
					$('#autoSuggestionsList').html(data); // et on remplit la liste des données
				}
			});
		}
}
 
function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
	$('#inputString').val(thisValue);
	setTimeout("$('#suggestions').hide();", 200);
}
 
$(document).ready( function () { // lorsque la page est entierement chargée
	$("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
		lookup($(this).val()) 
	});
 
	$("input#inputString").blur( function() { // si le champs texte perd le focus
		fill() 
	});
});

Enfin, il ne reste plus qu’à développer le php qui sera exécuté grâce à l’appel ajax. Dans ce script, on  récupère la valeur passée (ce qui est saisi dans le champ texte) et il n’y a plus qu’à faire une requête SQL dans la base de données et d’afficher les résultats sous forme de liste (avec en prime un petit onClick=fill() sur chaque élément de liste permettant de remplir le champ texte.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

< ?php	
 
	$link = mysql_connect("hote de la base", "login", "pass") or die("Impossible de se connecter : " . mysql_error());
	mysql_select_db("db278690514");
 
		// si une variable queryString a été posté
               if(isset($_POST['queryString'])) {
 
			// si la longueur du contenu de la variable est superieur à 0			
			if(strlen($queryString) >0) {
 
				// requete sql à personnaliser pour correspondre à votre base de données
				$result = mysql_query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10");
				if($result) {
 
					// on parcourt les resultats
					while ($pays = mysql_fetch_object($result)) {
						// on affiche les resultats dans un element de liste en ajoutant 
                                                // la fonction fill sur l'evenenement onClick
		         			echo '<li onClick="fill(\''.$pays->value.'\');">'.$pays->value.'</li>';
	         		        }
				} else {
					echo 'Il y a une probleme avec la requete sql.';
				}
			} 
		} else {
			echo 'Il ne devrait pas avoir un accès direct à ce script !!!';
		}
?>

Tutoriel basé sur celui du blog nodstrum : http://nodstrum.com/2007/09/19/autocompleter/

tags catégorie : JQuery, PHP