[AJAX] Fonction Autocomplete Ajax

**kelaan** · 21/05/2010, 12h09

Bonjour à tous !
Alors voilà je vous explique mon petit problème: j'ai un petit script avec un formulaire, la personne doit saisie le nom de l'entreprise et grâce au script au bout de trois lettres saisies la base de donnée renvoie des suggestions.

Seulement je voudrais que ce script s'applique à deux champs, mais je n'y arrive pas.

Voila le script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>FORMULAIRE POUR LE CMS</title>
<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
 
 
	function lookup(entreprise) {
		if(entreprise.length == 0) { // si le champs txte est vide
			$('#reponse').hide(); // on cache les suggestions
		} else { // sinon
			$.post("req.php", {requetedemande: ""+entreprise+""}, function(data){ // on envoit la valeur du champ texte dans la variable post queryString au fichier ajax.php
				if(data.length >0) {
					$('#reponse').show(); // si il y a un retour, on affiche la liste
					$('#liste_reponse').html(data); // et on remplit la liste des données
				}
			});
		}
}
 
	function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
		$('#entreprise').val(thisValue);
		setTimeout("$('#entreprise').hide();", 200);
}
 
	$(document).ready( function () { // lorsque la page est entierement chargée
	$("input#entreprise").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
		lookup($(this).val()) 
	});
 
	$("input#entreprise").blur( function() { // si le champs texte perd le focus
		fill() 
	});
});
 
 
	</script>
 
 
 
<form action="req.php" method="post">
 
<div>
		Nom du Projet :
		<br />
		<input type="text" size="30" value="" id="projet" />
		Type de Projet :
		<br />
		<select name="type" size="1">
			<option>Institutionnel</option>
			<option>E-commerce</option>
        </select>
		Nom de l'entreprise:
		<br />
		<input type="text" size="30" value="" id="entreprise" /><!--  champ texte à analyser pour les suggestions -->
</div>
 
<div  id="reponse" style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
<div  id="liste_reponse"><!-- liste contenant les suggestions -->
			&nbsp;
		</div>
</div>
<div>
		Nom du client:
		<br />
		<input type="text" size="30" value="" id="client" /><!--  champ texte à analyser pour les suggestions -->
</div>
 
<div  id="reponse_client" style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
<div  id="liste_reponse_client"><!-- liste contenant les suggestions -->
			&nbsp;
		</div>
</div>
 
</form>
</body>
</html>

et voila le script requete:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
<?php
 
 
	mysql_connect("localhost", "root", "");
	mysql_select_db("cms");
 
		// si une variable queryString a été posté
               if(isset($_POST['requetedemande'])) {
				$requetedemande = $_POST['requetedemande'];
			// si la longueur du contenu de la variable est superieur à 0			
			if(strlen($requetedemande) >3) {
 
				// requete sql à personnaliser pour correspondre à votre base de données
				$result = mysql_query("SELECT Nom FROM contacts WHERE Nom LIKE '$requetedemande%' LIMIT 10");
				if($result) {
 
					// on parcourt les resultats
					while ($rep = 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(\''.$rep->Nom.'\');">'.$rep->Nom.'</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 !!!';
		}
 
?>

Si vous pouviez me guider, à la limite rien que me dire par ou commencer, ce serait super. Merci d'avance.

**Bovino** · 21/05/2010, 12h41

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$("input#entreprise").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
	lookup($(this).val()) 
});
 
$("input#entreprise").blur( function() { // si le champs texte perd le focus
	fill() 
});

Adapte cette partie pour qu'elle s'applique à ton autre champ

Invité · 21/05/2010, 18h01

Bonjour,
si tu saiss le faire vraiment pour un, au pire tu mets une deuxieme fonction javascript identique.

L'une s'apperait lookup et l'autre lookup2
Ils appelleraient recherche.php et recherche2.php si ce n'est pas la même table !

Ors j'ais vu que tu savais

[AJAX] Fonction Autocomplete Ajax

AJAX

Discussions similaires

Partager

Partager