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
| <!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Recherche avancée dans un select</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
/*_____ script original créé par lddsoft mai 2011 _____*/
var z = 0;
var LO = new Array();
var valeur = new Array();
function init(){
for(z=0; z<document.getElementById('liste').length; z++){
LO[z] = document.getElementById('liste').options[z].text;
valeur[z] = document.getElementById('liste').options[z].value;
}
}
function liste_complete(){
document.getElementById('liste').length = 0; // vider la liste
for(z=0; z<LO.length; z++){
document.getElementById('liste').options[z] = new Option(LO[z],valeur[z]);
}
}
function chercher(lettres){
var LIST = document.getElementById('liste');
if(lettres == ""){ // si le champ est vide, afficher toutes les options de départ
liste_complete();
return false;
}
var newliste = new Array();
var newvalue = new Array();
var x = -1;
for(z=0; z<LIST.length; z++){
if(LIST.options[z].text.indexOf(lettres)!=-1){
x++;
newliste[x] = LIST.options[z].text;
newvalue[x] = LIST.options[z].value;
}
}
if(x!=-1){ // si la(les) lettre(s) sont dans une(des) option(s)
LIST.length = 0; // vider la liste
for(z=0; z<newliste.length; z++){
LIST.options[z] = new Option(newliste[z],newvalue[z]);
}
}else{liste_complete();}
}
</script>
</head>
<body onload="init();">
<form id="formulaire" action="#" name="formulaire">
<label for="entree">Rechercher:</label>
<input type="text" id="entree" size="30" onkeyup="chercher(this.value);" />
<br /><br />
<select id="liste" onchange="liste_complete()">
<option value="1500">Bruxelles 14H30</option>
<option value="0800BA">Paris 04H15</option>
<option value="4000C">Londres 10H15</option>
<option value="520CV">Madrid 08H45</option>
<option value="4630M">Amsterdam 14H25</option>
<option value="1810">Lonjumeau 09H25</option>
<option value="MP001">Lourdes 19H30</option>
</select>
</form>
</body>
</html> |
Partager