[AJAX] listes liées ajax transformable en autocompletion
bonjour,
j'ai deux liste liées en ajax , php qui fonctionne bien.
une liste maitre qui affiche les villes et une liste "esclave" qui affiche les codes postaux.
de plus ce script ne fait appel qu'à une seule table
j'aimerais qu'à la place du premier select ( select maitre ) celui qui affiche la liste des villes mettre un champ input en autocompletion ( auto suggest ). En effet il serait fastidieux pour l'internaute de dérouler la liste jusqu'à l'une des quelques 36000 villes.
que dois je modifier pour arriver a changer la première liste en une champ input en autocompletion
comme on en trouve ici
http://www.dhtmlgoodies.com/scripts/...amic-list.html
voici le fichier form2.php
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
| <?php require_once('../Connections/accesville.php');
$Table="villes";
$champ_ville="nom_com";
$champ_cp="nom_ville";
?>
<?php
mysql_select_db($database_accesville, $accesville);
$champ_ville = mysql_real_escape_string(htmlspecialchars(stripcslashes($champ_ville)));
$query_Recordset1 = "SELECT DISTINCT $champ_ville FROM $Table ORDER BY $champ_ville ASC";
$Recordset1 = mysql_query($query_Recordset1, $accesville) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Script de listes deroulantes liees avec appel par AJAX, (evite le rechargement de la page) -->
<script language="Javascript"type="text/JavaScript">
// Requette AJAX
function makeRequest(url,id_niveau,id_ecrire){
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open('POST', url, true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj=document.getElementById(id_niveau);
data="val_sel="+obj.value;
http_request.send(data);
}
function traitementReponse(http_request,id_ecrire) {
var affich="";
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// cas avec reponse de PHP en mode texte:
//chargement des elements reçus dans la liste
var affich_list=http_request.responseText;
obj = document.getElementById(id_ecrire);
obj.innerHTML = affich_list;
}
else {
alert('Un problème est survenu avec la requête.');
}
}
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
</head>
<body>
<form name="test1" method="post" action="form2.php" >
<div id="id_list1">VILLES :<br>
<select name="niv1" id="id_niv1" onChange="makeRequest('ajaxreponse.php','id_niv1','id_list2')">
<option>-- Choisissez --</option>
<?php
while ($row=mysql_fetch_assoc($Recordset1)){
?>
<option value="<?php echo $row[$champ_ville]?>">
<?php echo $row[$champ_ville]?></option>
<?php
}
?>
</select>
<br><br>
</div>
<div id="id_list2">
<!-- ici sera charge la reponse mode texte de PHP à la request AJAX -->
</div>
</form>
</body>
</html>
<?php
mysql_free_result($Recordset1);
?> |
et la page ajaxreponse.php
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
| <?php
// script PHP interrogation Base de donnees pour reponse a la requette AJAX
$host="localhost";
$Login="root";
$Pass="";
$DB="base";
$Table="villes";
$champ_ville="nom_com";
$champ_cp="nom_ville";
// Connexion a la base de donnees
$AccesBase = mysql_connect($host,$Login,$Pass);
mysql_select_db($DB,$AccesBase);
$valsel = mysql_real_escape_string(htmlspecialchars(stripcslashes($_POST["val_sel"])));
$QuestionBase = sprintf("SELECT * FROM $Table WHERE ".$champ_ville."='".$valsel."' ORDER BY ".$champ_cp." ASC ",
mysql_real_escape_string($champ_ville, $AccesBase),
mysql_real_escape_string($champ_cp, $AccesBase));
$result_recherche=mysql_query( $QuestionBase) or die (mysql_error());
// construction de la liste deroulante
$aff="";
$aff=$aff."CODE POSTAL :<br>
<select name='niv2' id='cont_list2' >
<option>-- Choisissez --</option>";
while ($row=mysql_fetch_assoc($result_recherche)){
$aff.="<option value=\"$row[$champ_cp]\">$row[$champ_cp]</option>";
}
$aff=$aff."</select>
<br><br>";
// envoi réponse Php à Ajax
echo $aff;
?> |
merci pour l'aide que vous pourrez m'apporter
