Discussion :

[shgeoffrey]

Bonjour à tous,


Je suis en train de créer un champ de recherche intelligent : quand on tape une lettre dans le champs, le nom des villes de son département commençant par ces lettres s'affiche dans une liste déroulante. La liste des villes est stockée dans une base de données. Elle est récupérer et traitée grâce à l'AJAX.

Seul problème, je ne parviens pas à le faire fonctionner correctement. Il refuse de récupérer la valeur du champ de recherche quand on tape une lettre (function onkeyup()) et à me la transmettre au script Php.

Voici les codes :

Champs de recherche :

Code :

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

1
2
3
4
5
 
<input type="text" id="choix_ville" name="choix_ville" style="position:absolute; top:120px; left:163px; height:23px; width:133px;  padding-left:3px; background-image:url(img/boutons/champ_ville.jpg); padding-top:2px; display:none;" onkeyup="ChoixVille();">
 
<div id="choix_ville2" style="position:absolute; top:396px; left:613px; height:200px; width:131px; cursor:pointer; overflow:auto; border:1px solid #CCC; background-color:#fff; display:none; padding-left:3px;">
</div>

Script Js :

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
 
function ChoixVille()
{
	if ((document.getElementById("choix_ville2").style.display == "none") && (document.getElementById("dep").value != "00"))
	{
		{
			var xhr; 
			try
			{
				xhr = new ActiveXObject('Msxml2.XMLHTTP');
			}
			catch (e)
			{
				try
				{
					xhr = new ActiveXObject('Microsoft.XMLHTTP');
				}
				catch (e2) 
				{
					try
					{
						xhr = new XMLHttpRequest();
					}
					catch (e3)
					{
						xhr = false;
					}
				}
			}
 
			xhr.onreadystatechange  = function()
			{ 
				if(xhr.readyState  == 4)
				{
					if(xhr.status  == 200) 
					document.getElementById("choix_ville2").innerHTML = xhr.responseText ; 
					else 
					document.getElementById("choix_ville2").innerHTML = "Error code " + xhr.status ;
				}
			};
			Dep = document.getElementById("dep").value;
			Ville = new document.getElementById("choix_ville").value;
			xhr.open( "GET", "php/villes.php?dep="+Dep+"&ville="+Ville,  true);
			xhr.send(null);
		}
 
 
		document.getElementById("choix_ville2").style.display = "block";
		document.getElementById("choix_dep2").style.display = "none";
	}
}

Et script php :

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
 
<?php
 
mysql_connect("********", "*********", "********");
mysql_select_db("*********");
 
$afficher_villes = mysql_query("SELECT * FROM maps_ville WHERE id_departement = '".$_GET["dep"]."' AND nom LIKE '".$_GET["ville"]."%'");
$row_afficher_villes = mysql_fetch_assoc($afficher_villes);
$total_afficher_villes = mysql_num_rows($afficher_villes);
        do
        {
                $villes .= "<div id='ville' onclick=\"Choix_Ville('Choisir','".$row_afficher_villes['nom']."','".$row_afficher_villes['id_ville']."');>".$row_afficher_villes['nom']."</div>
                ";
        }
        while ($row_afficher_villes = mysql_fetch_assoc($afficher_villes));
 
echo $villes ;
?>

Merci d'avance pour votre aide.

[emmanuel.remy]

Cette ligne est fausse:

Code :

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

1
2
//Ville = new document.getElementById("choix_ville").value;
Ville = document.getElementById("choix_ville").value;

ERE

[shgeoffrey]

Oui merci j'ai fais ma modification.

Maintenant quand je tape la première lettre d'une ville ça fonctionne bien mais pas quand je tape d'autres lettres derrière, la fonction ne s'enclenche plus. Je pensais que la fonction onkeyup() fonctionnait à chaque foix qu'on appuyait sur une touche!?

[emmanuel.remy]

Oui merci j'ai fais ma modification.

Maintenant quand je tape la première lettre d'une ville ça fonctionne bien mais pas quand je tape d'autres lettres derrière, la fonction ne s'enclenche plus. Je pensais que la fonction onkeyup() fonctionnait à chaque foix qu'on appuyait sur une touche!?

Regarde ton code, tu mets une condition sur la visibilité de choix_ville2

Code :

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

if ((document.getElementById("choix_ville2").style.display == "none")

et tu montres plus loin choix_ville2 . Cela ne peut donc plus fonctionner.

D'autre part, n'oublie pas la notion de Internet. Ce n'est certainement pas raisonnable de faire un aller-retour vers le server pour ce genre de vérification à chaque touche enfoncée...

ERE

[shgeoffrey]

C'est bon!

Pour ceux que ça peux aider, voici le code Js :

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
 
function ChoixVille(Action)
{
	if ((document.getElementById("dep").value != "00") && (Action == "Afficher"))
	{
		{
			var xhr; 
			try
			{
				xhr = new ActiveXObject('Msxml2.XMLHTTP');
			}
			catch (e)
			{
				try
				{
					xhr = new ActiveXObject('Microsoft.XMLHTTP');
				}
				catch (e2) 
				{
					try
					{
						xhr = new XMLHttpRequest();
					}
					catch (e3)
					{
						xhr = false;
					}
				}
			}
 
			xhr.onreadystatechange  = function()
			{ 
				if(xhr.readyState  == 4)
				{
					if(xhr.status  == 200) 
					document.getElementById("choix_ville2").innerHTML = xhr.responseText ; 
					else 
					document.getElementById("choix_ville2").innerHTML = "Error code " + xhr.status ;
				}
			};
			var Dep = document.getElementById("dep").value;
			var Ville = document.getElementById("choix_ville").value;
			xhr.open( "GET", "php/villes.php?dep="+Dep+"&ville="+Ville,  true);
			xhr.send(null);
		}
	}
 
	if ((document.getElementById("dep").value != "00") && (Action == "Ouvrir") && (document.getElementById("choix_dep2").style.display = "none"))
	{
		document.getElementById("choix_ville2").style.display = "block";
	}
}

Merci à tous pour votre aide!