<html>
<head>
<title></title>
<script type="text/javascript">
<!-- Debut
// Original: Robert Khatchadourian (sonic890@hotmail.com)
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"
function initialisation()
{
lettre = new NomObjets('formulaire','liste','entree');
lettre.bldInitial();
}
/*
Dans cette fonction, on crée avec l'opérateur spécial new un objet lettre en lui définissant la fonction NomObjets . Cet objet contient le nom de notre formulaire (ici formulaire), le nom de notre liste déroulante (ici liste) et le nom du champ texte (ici entrée).
Une fois ceci fait on execute la fonction bldInitial() en lui concatenant l'objet créé
*/
/* ------------------------------------------------------------------------------------------------------ */
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;
}
/*
On continue nos affectations dans cette nouvelle fonction. Elle reçoit donc le nom du formulaire le nom de la boite à liste et le nom de le boite à texte. Vous remarquerez qu'elle reçoit également la variable str qui sera une chaîne de caractères. Bon aller je vais être sympa, je vais vous dévoiler ce qu'elle contient avant que l'on y arrive ;-). Elle contiendra ce que vous avez entré dans la boite à texte, mais on y viendra plus tard.
Bon alors comment ça marche tout ce bidule .? Eh bien c'est très simple, avec l'opérateur spécial this on va faire référence à l'objet courant (les machins envoyés à la fonction) et pour simplifier la "comprette" on va garder les même noms.
Les 3 premières lignes ne devraient pas vous poser de problèmes, mais ça commence à se corser après. Donc dans la 4ième ligne, on utilise un operateur logiques || (OR logique, si l'une des deux expressions ou les deux ont la valeur true, la valeur du résultat est true. Si les deux expressions ont la valeur false, la valeur du résultat est false.) qui vous permet de mettre la variable select_str toujours à 1 si on a quelque chose d'entré (str) ou rien ("").
Ensuite on crée un tableau avec l'opérateur spécial new associé à l'objet Array.
Puis on déclare 3 fonctions initialize, bldInitial, 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++)
/*
On ouvre une boucle avec l'instruction for jusqu'à que i soit inférieur au nombre de valeur "<option>" restantes. Ceci est effectué en utilisant la propriété length associée à la propriété options de l'objet select (retourne un tableau correspondant aux options (élément <OPTION>)). Gardez bien en mémoire cette syntaxe car elle est réutilisée un peu partout plus bas.
*/
{
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+",";
}
/*
Bon, donc pendant que notre boucle tourne on donne au tableau selectArr(index i) les "<option>" restant dans le fameux tableau dont je parlais plus haut indexé i.
Puis on rempli notre variable select_str avec la valeur du champ "<option>" (on ajoute simplement la propriété value à notre déclaration de notre tableau d'options) et le texte se trouvant entre "<option>" et "</option>" (en ajoutant la propriété text à la déclaration de notre tableau d'options) séparé par deux points puis une virgule pour séparer le tout (vous verrez pourquoi plus bas). Pour faire ceci on utilise l'opérateurs de chaînes += qui a pour tâche effectuer la concaténation des deux chaînes et de mettre le résultat dans la première opérande.
*/
}
else
{
var tempArr = this.select_str.split(',');
/*
Une fois notre boucle finie on sépare les éléments contenus dans notre variable select_str au niveau des virgules avec la méthode split et on met tout notre petit monde dans un tableau temporaire tempArr (ah oui j'a oublié de vous dire que la méthode split scinde une chaîne de caractère et met le tout dans un tableau, pas besoin donc de le déclarer avec l'opérateur spécial new).
*/
for(var i=0;i<tempArr.length;i++)
/*
Re boucle for jusqu'à que i soit supérieur à la longueur du tableau tempArr (merci à la propriété length de l'objet Array).
*/
{
var prop = tempArr[i].split(':');
this.selectArr[i] = new Option(prop[1],prop[0]);
}
}
return;
}
/*
Bon bon bon... On continue donc notre découpe, mais cette fois au niveau des deux points (toujours avec la méthode split) et on met tout ca dans un tableau prop.
Et la... Attention les yeux... on remplir notre tableau selectArr en créant de nouvelles balise "<option>" en utilisant le constructeur Option(). Puis on a plus qu'à renvoyer le tout avec l'instruction return.
*/
/* ------------------------------------------------------------------------------------------------------ */
function bldInitial()
{
this.initialize();
/* Au commencement de cette fonction, on exécute la fonction 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");
/*
Ici on va utiliser une expression régulière avec l'objet RegExp pour nous permettre d'ignorer la casse de ce que l'utilisateur va entrer dans le champ texte. Ceci est possible grâce au flag i. ^ ne sert qu'à dire qu'il faut commencer au début de la ligne.
*/
for(var i=0;i<this.selectArr.length;i++)
/*
ouverture d'une autre boucle jusqu'à que i soit supérieur au nombre d'éléments contenus dans le tableau selectArr
*/
if(pattern1.test(this.selectArr[i].text))
/*
On ouvre une condition if, qui va nous tester si notre expression régulière pattern1 avec la méthode test (qui permet d'exécuter une recherche pour trouver des correspondances entre une expression régulière et une chaîne spécifiée) est vraie ou fausse en fonction du texte contenu notre tableau selectArr (vous savez nos "<option>").
*/
document.forms[this.formname][this.selname].options[j++] = this.selectArr[i];
/*
si c'est le cas, on incrémente le tableau d'option avec j++ (++ étant un opérateurs mathématiques d'incrémentation) et on lui donne la valeur correspondante du tableau selectArr.
*/
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)
/*
au fur et à mesure des lettres ajoutées j vaudra 1 (c'est a dire qu'il ne restera plus qu'un seul option dans le tableau
*/
{
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>
| 
