Programmation ⇒ javascript facebook twitter youtube

Selection fine dans une boite à liste | Selection fine dans une boite à liste


Selection fine dans une boite à liste

Exemple :

Il vous est sûrement arrivé un jour d'avoir à faire un choix dans une boite à liste si longue que vous aviez du mal à trouver ce que vous vouliez.
En général la technique consiste à taper la première lettre de son choix et à faire défiler tout ce qui correspond à la lettre.
Ce script est en fait un extension de cette méthode en offrant la possibilité de taper plusieurs lettre voir tout le mot et ne sélectionner que ceux qui correspondent.

Entrez les premières lettres du pays, une sélection sera proposée.

 

Explication du script : (a copier et à coller)

 

<html>
<head>
<title></title>

<script type="text/javascript">

function initialisation()
{
lettre = new NomObjets('formulaire','liste','entree');
lettre.bldInitial();
}


function NomObjets(formname,selname,textname,str)
{
this.formname = formname;
this.selname = selname;
this.textname = textname;
this.select_str = str || '';
this.selectArr = new Array();
this.initialize = initialize;
this.bldInitial = bldInitial;
this.maj = maj;
}


function initialize()
{
if (this.select_str =='')
// Si la variable select_str est vide, en gros si il n'y a rien de sélectionné

 {
 for(var i=0;i<document.forms[this.formname][this.selname].options.length;i++)



  {
  this.selectArr[i] = document.forms[this.formname][this.selname].options[i];
  this.select_str += document.forms[this.formname][this.selname].options[i].value+" : "+document.forms[this.formname][this.selname].options[i].text+",";
  }

 }


else
 {
 var tempArr = this.select_str.split(',');


 for(var i=0;i<tempArr.length;i++)


  {
  var prop = tempArr[i].split(':');
  this.selectArr[i] = new Option(prop[1],prop[0]);
  }
 }
return;
}


function bldInitial()
{
this.initialize();

for(var i=0;i<this.selectArr.length;i++)
/* On ouvre une boucle jusqu'à que i soit inférieur au nombre d'éléments du tableau selectArr.*/
document.forms[this.formname][this.selname].options[i] = this.selectArr[i];
/* On réécrit nos "<option>" avec ce que contient le tableau selectArr.*/
document.forms[this.formname][this.selname].options.length = this.selectArr.length;
/* et on donne autant d'option que contient notre tableau selectArr.*/
return;
// puis on renvoie le tout
}


function maj()
{
var str = document.forms[this.formname][this.textname].value;
// On donne a la variable str la valeur du champ texte.

if(str == '') { this.bldInitial();return; }
// si la variable str est vide, on execute la fonction bldInitial()

this.initialize();
// on execute la fonction initialize()

var j = 0;
// on ouvre une variable j et on y met 0

pattern1 = new RegExp("^"+str,"i");


for(var i=0;i<this.selectArr.length;i++)


if(pattern1.test(this.selectArr[i].text))

document.forms[this.formname][this.selname].options[j++] = this.selectArr[i];

document.forms[this.formname][this.selname].options.length = j;
// Puis on donne à j le nombre d'option présent dans notre tableau. if(j==1)

 {
 document.forms[this.formname][this.selname].options[0].selected = true;
/*
On va donc sélectionner automatiquement l'option restant avec la propriété selected de l'objet Option.
*/
 }
}

// Fin -->
</script>

</head>
<body OnLoad="javascript:initialisation()">
<!-- au chargement de la page, détecté par l'événement OnLoad, on exécute la fonction initialisation(). -->

<!-- puis il nous reste plus qu'à créer notre formulaire -->
<form name="formulaire" action="#">
Entrez les premières lettres du pays, une sélection sera proposée.
<input type="text" name="entree" size="30" onKeyUp="javascript:lettre.maj();">
<!-- Notez que sur l'événement onKeyUp (relâchement de la touche du clavier) on exécute la fonction maj() -->
<select name="liste" size=3>
<option value="AF">Afghanistan</option>
<option value="SF">Afrique du Sud</option>
<option value="AL">Albanie</option>
<!-- etc... Je vous épargne la liste hein, c'est suffisamment long comme ça -->
</select>
</form>

</body>
</html>




>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces