Liste interactive

Version imprimable

23/12/2004, 16h54
10-nice

Liste interactive

Je voudrais mettre en place un champ texte avec une liste à coté ou la liste est trié en fonction de ce qui est saisi dans le champ text (à chaque onkeyup). Genre je tape a dans mon champ texte la liste n'a en option que les valeurs commencant par a, et ainsi de suite.

J'utilise smarty en template et n'inclus pas de php dans ma page.

Voici une solution :

Il te faut d'abord la liste en double (la premiere liste est cachée, et ne sert qu'a retrouver la liste complète) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<select name="maListe" style="display:none">
<option value="1">ASP</option>
<option value="2">Javascript</option>
<option value="3">PHP</option>
<option value="4">XML<option>
</select>
<select name="maListe2">
<option value="1">ASP</option>
<option value="2">Javascript</option>
<option value="3">PHP</option>
<option value="4">XML<option>
</select>

Le onkeyup de ton champ texte appellera cette fonction, en lui passant sa valeur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function majListe(debut){
        /* la liste visible est vidée */
	document.f.maListe2.options.length=0;
	var listeComplete=document.f.maListe;
        /* parcours de la liste complète */
	for(var i=0,nb=0;i<listeComplete.options.length;i++){
                /* test du début de chaque libellé de la liste */
		if(listeComplete.options[i].text.indexOf(debut)==0){
                        /* ajout de l'option à la liste visible */
			var newOption = new Option(listeComplete[i].text, listeComplete[i].value, false, false);
			document.f.maListe2.options[nb] = newOption;
			nb++;
		}
	}
}

23/12/2004, 17h13
10-nice

Ca marche :) Merci a toi !!! t'es l'meilleur :P
23/12/2004, 17h25
10-nice

Autre chose cependant, comment faire pour que la casse ne soit pas respecté ? Les éléments de ma liste commence par des majuscule (ou des chiffres) et si je met une minuscule ca fonctionne pas.

je rectifie : la fonction ToUpperCase() peut prendre en paramètre l'endroit du'un caractère que l'on veut modifier ou bien il prend une chaine entière obligatoirement?
23/12/2004, 17h31
necronick

il suffit de convertir les deux valeurs (celle de ton champ texte et chaque libellé de la liste) en minuscules :

Code:

if(listeComplete.options[i].text.toLowerCase().indexOf(debut.toLowerCase())==0){

Par contre, lorsqu'il y a des chiffres, qu'est-ce que c'est censé faire ?
23/12/2004, 17h32
10-nice

Rien a faire pour les chiffres c amarche impec ;)

Merci Necronick t'es vraiment un boss :) je note ton pseudo :)

j'avoue avoir essayer de trouver une solution par moi même mais j'apprends sur le tas le HTML (pas compliqué) le PHP, le javascript le SQL et Smarty, depuis environ 1mois et demi et je dois finir la version alpha d'un projet proffessionel pour la boite ou je suis en apprentissage... ben c ardu :P
Mais enormément plaisant au demeurant :D
23/12/2004, 17h34
necronick

Bah, si c'avait pas été moi, un des nombreux autres membres du forum t'aurait donné une solution ;)