[AJAX] Fonction Autocomplete Ajax
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:
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 -->
</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 -->
</div>
</div>
</form>
</body>
</html> |
et voila le script requete:
Code:
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.
