Champ de recherche intelligent

Version imprimable

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:

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:

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:

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.

Cette ligne est fausse:

Code:

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

ERE

20/04/2009, 00h27
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!?
20/04/2009, 07h53
emmanuel.remy

Citation:

Envoyé par 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!?

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

Code:

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

C'est bon!

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

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
 
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!