Modifier un élément HTML au fur et à mesure de la saisie de l'utilisateur dans un input

Comment faire pour adapter les options d'un select au fur et à mesure de la saisie de l'utilisateur dans un champs texte?

L'exemple le plus classique est le champs où on entre son code postal, et il affine la liste des villes à coté au fur et à mesure qu'on tape.
On va faire ça:

Ma table codes postaux se présente de la manière suivante (téléchargeable là):

html
<table id="table_results" class="data">
<thead><tr>
<th>Field
</th><th>Type
</th><th>Null

</th><th>Key
</th><th>Default
</th><th>Extra
</th></tr>
</thead>
        <tbody>
    <tr class="odd">
    <td class="">numero</td>
    <td class="">bigint(20)</td>
    <td class="">NO</td>

    <td class="">PRI</td>
    <td class=""><i>NULL</i></td>
    <td class="">auto_increment</td>
</tr>
            
    <tr class="even">
    <td class="">cp</td>
    <td class="">text</td>

    <td class="">NO</td>
    <td class="">&nbsp;</td>
    <td class=""><i>NULL</i></td>
    <td class="">&nbsp;</td>
</tr>
            
    <tr class="odd">
    <td class="">ville</td>
    <td class="">text</td>

    <td class="">NO</td>
    <td class="">&nbsp;</td>
    <td class=""><i>NULL</i></td>
    <td class="">&nbsp;</td>
</tr>
            
</tbody>
</table>

Je souhaite que lorsque j'aurai rentré les premiers chiffres de mon code postal, il m'indique la liste des villes correspondant dans le select d'à coté.

La solution c'est de l'ajax :D

[HTML]
		<input type="texte" name="codepostal" id="codepostal" onkeyup="selectcp();">
		<select name="ville" id="ville">
		</select>

onkeyup="selectcp();" pour lui dire d'appeler cette fonction lorsque l'utilisateur lève le doigt.

On ajoute un script AJAX dans la page qui va lui demander de remplacer le contenu de <select name="ville" id="ville"> </select> par ce que va retourner le script php function.php. Dans l'exemple là, je lui précise une variable de type get qui correspond à ce que l'utilisateur a tapé.

la fonction Ajx() sert à initier la connection ajax. elle est appelée par la function getphpelementid.
getphpelementid va mofifier le contenu de l'élément dont l'ID est en parametres a partir du script php indiqué dans l'url.
selectcp() fait juste une vérification avant d'appeller getphpelementid

[XML]
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>exemple codes postaux</title>
<script type="text/javascript">
function Ajx() 
{
	var request = false;
	try
	{request = new ActiveXObject('Msxml2.XMLHTTP');}
	catch (err2)
	{ try {	request = new ActiveXObject('Microsoft.XMLHTTP');}
		catch (err3) {
			try {request = new XMLHttpRequest();}
				catch (err1) {request = false;}
		}
	}
	return request;
}
function getphpelementid(elementid,url,endvar)
{
 var xhr = Ajx();
 xhr.onreadystatechange  = function()
    { 
         if(xhr.readyState  == 4)
         {
              if(xhr.status  == 200) {
		if(xhr.responseText == "deco"){
		    deco();
		}else{
		    document.getElementById(elementid).innerHTML = xhr.responseText;
		}	 
	      }else{
                 document.getElementById(elementid).innerHTML = "<font color=\"#FF0000\">Error code " + xhr.status + "</font>";
	      }
         }
    };
  
   xhr.open("GET", url + endvar, true);
   xhr.send(null); 
}
function selectcp()
{
	//alert('plop');
	var cp = document.getElementById('codepostal').value;

	//on ne teste qu'à partir de deux caracteres
	if (cp.length > 1)
	{
		getphpelementid("ville","function.php?cp=",cp);
	}
}
</script>
<body>
	<h1> C'est un exemple de remplissage &agrave; la vol&eacute;e des options d'un select en HTML &agrave; partir des premiers caract&egrave;res tap&eacute; dans un champs texte.</h1>
	<p>
		<input type="texte" name="codepostal" id="codepostal" onkeyup="selectcp();">
		<select name="ville" id="ville">
		</select>
	</p>
</body>

Le script php est tout simple:
Modifiez les variables de connexions sql et éventuellement le nom des champs dans a requête pour l'adapter.

<?php
//connexion mysql
$mysql_host="";
$mysql_database="";
$mysql_user="";
$mysql_password="";
 
if (!mysql_connect($mysql_host, $mysql_user, $mysql_password)) {
	echo 'Impossible de se connecter à MySQL';
	exit;
}
mysql_query("USE ".$mysql_database);
$result=mysql_query("SELECT numero, ville FROM codespostaux WHERE cp LIKE '".mysql_real_escape_string($_GET['cp'])."%' ORDER BY ville");
while ($row=mysql_fetch_row($result))
{
	echo "\n<option value=\"".$row[0]."\">".$row[1]."</option>";
 
}
?>

Commentaires

1. Le lundi, décembre 27 2010, 12:37 par sz

marche pas sous IE

2. Le lundi, décembre 27 2010, 18:39 par gnieark

En effet la fonction javascript Ajx() écrite là ne fonctionne sous internet explorer qu'à partir de sa version 7.

il y aurait moyen de l'adapter pour ie 5 et 6 http://msdn.microsoft.com/en-us/lib...

De plus, sur ce billet j'ai utilisé un iframe pour afficher l'exemple. ça n'aide pas non plus avec une vieille version d'ie.

Mais ceci dit, avec ie6, c'est tout l'affichage de mon blog qui est un peu cassé.

Je vous remercie d'avoir lu ceci malgré une présentation qui doit bien rebuter.

3. Le lundi, décembre 27 2010, 19:03 par Ben

Utilise browsershots:

http://browsershots.org/http://blog...

4. Le lundi, décembre 27 2010, 21:26 par gnieark

Excellent, ils ont meme mis lynx!!!

5. Le samedi, janvier 8 2011, 01:05 par petites annonces

Merci pour cette article! :)

Blog du grouik