AJAXComment 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=""> </td>
<td class=""><i>NULL</i></td>
<td class=""> </td>
</tr>
<tr class="odd">
<td class="">ville</td>
<td class="">text</td>
<td class="">NO</td>
<td class=""> </td>
<td class=""><i>NULL</i></td>
<td class=""> </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 à la volée des options d'un select en HTML à partir des premiers caractères tapé 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.
Commentaires
marche pas sous IE
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.
Utilise browsershots:
http://browsershots.org/http://blog...
Excellent, ils ont meme mis lynx!!!
Merci pour cette article!