Enfin une liste deroulante (combobox) modifiable

Soyez le premier à donner votre avis sur cette source.

Snippet vu 50 762 fois - Téléchargée 2 444 fois

Contenu du snippet

J'ai longtemps cherché, et finalement j'ai fait mon propre truc, en reprenant qq sources de ce site.
Je suis débutant, donc y'a peut-être des bugs...
Mots clés : liste déroulante deroulante modifiable combo box combobox calque

Fonctionne sur IE5+

Source / Exemple :


<html>
<script>
function display_liste(ct, cl, ld) {	// Affiche le calque de la liste
	var listd = document.getElementById(ld);
	var calqt = document.getElementById(ct);
	var calql = document.getElementById(cl);
	calql.style.display = '';
	calql.style.pixelTop = calqt.offsetTop - calqt.scrollTop + 20;
	calql.style.pixelLeft = calqt.offsetLeft - calqt.scrollLeft;
}
function hide_liste(ct, cl, ld) {	// Affiche ou masque le calque de la liste suivant son dernier état
	var calqt = document.getElementById(ct);
	var calql = document.getElementById(cl);
	if (calql.style.diplay == '') {
		calql.style.display = 'none';
	} else {
		display_liste(ct, cl, ld);
	}
}
function display_down(keyc, ld, ct, cl) {	// Affiche la liste si la touche "keyc" est pressée
	var listd = document.getElementById(ld);
	var calqt = document.getElementById(ct);
	var calql = document.getElementById(cl);
	if (event.keyCode==keyc) {
		display_liste(ct, cl, ld);
	}
	if ((event.keyCode==40) && (event.keyCode==keyc)) {
		listd.focus();
	}
}
function enter_list(tb, ld, cl) {	// appelle getValue si la touche "Enter" est pressée dans la liste
	if (event.keyCode==13) {
		getValue(tb, ld, cl);
	}
}
function liste_lostfocus(tb, ld, cl) { // Masque le calque si le texte et la liste n'ont pas le focus
	var calql = document.getElementById(cl);
	if ( (self.document.activeElement.id != tb) && (self.document.activeElement.id != ld) ) {
		calql.style.display = 'none';
	}
}
function getValue(tb,ld, cl) {		// Affecte la valeur de la liste choisie dans la zone de texte
	var calql = document.getElementById(cl);
	var textb = document.getElementById(tb);
	var listd = document.getElementById(ld);
	textb.value=listd.item(listd.selectedIndex).text;
	// textb.value=listd.item(listd.selectedIndex).value; si on veut la valeur dans le code et pas dans la liste
	calql.style.display = 'none';
	textb.focus();
	textb.select();
}
function list_size(liste) {
	t=0;
	for(i=0; i<liste.length; i++) {
		if(liste.options[i].value.length > t) {
			t=liste.options[i].value.length;
		}
	}
	list_size=t;
}
function text_exist(tb, ld) { // regarde si le début existe
	var textb = document.getElementById(tb);
	var listd = document.getElementById(ld);
	if (textb.value != "") {
		for (i=0; i<listd.length; i++) {
			if (textb.value.toLowerCase() == listd[i].text.substring(0, textb.value.length).toLowerCase()) {
				return i;
			} 
			else {
				if (listd[i].text > textb.value.substring(0, listd[i].text.length)) {
					return -2;
				}
			}
		}
	}
	return -1;
}
function disp_exist(tb, ld, ct, cl) { // regarde si existe et affiche le calque de la liste
	var calqt = document.getElementById(ct);
	var calql = document.getElementById(cl);
	temp=text_exist(tb, ld);
	if (temp != -1) {
		display_liste(ct, cl, ld);
	}
	else {
		calql.style.display = 'none';
	}
	return temp;
}
function text_match(tb, ld) { // regarde si le texte existe en entier
	var textb = document.getElementById(tb);
	var listd = document.getElementById(ld);
	if (textb.value != "") {
		for (i=0; i<listd.length; i++) {
			if (textb.value.toLowerCase() == listd[i].text.toLowerCase()) {
				return i;
			}
		}
	}
	return -1;
}
function insert_new(tb, ld) {	// insère avant ou à la fin
	var textb = document.getElementById(tb);
	var listd = document.getElementById(ld);
	if (textb.value != "") {
		if (text_match(textb, listd) == -1) {
			pos=listd.length;
			for (i=0; i<listd.length; i++) {
				if (listd[i].text>textb.value) {
					pos=i; 
					i=listd.length;
				}
			}
			listd.length++;
			for (i=listd.length-1; i>pos; i--) {
				listd[i].text=listd[i-1].text;
			}
			listd[pos].text=textb.value;
			alert("new entry added !");
		}
		else {
			alert("Entry already exists !");
		}
	}
}
</script>

<body>
<br>
Combobox: <div id=texte1 nowrap STYLE="border-width:2;border-style:inset;border-color:white;width:0;display:inline;">
	<input type="text" id=texteb value='' style="border-width:0;font-size:14;width:150px;"
 onDblClick="hide_liste('texte1','liste1','listed'); this.select();"
 onblur="liste_lostfocus('texteb', 'listed', 'liste1');"
 onkeyup="document.getElementById('listed').selectedIndex=disp_exist('texteb', 'listed', 'texte1', 'liste1');
	 display_down(40, 'listed', 'texte1', 'liste1');"
 onkeydown="display_down(34, 'listed', 'texte1', 'liste1');">
	<input type="button" id=dropbouton value="6" style="line-height:0;height:18;font-family:webdings;font-size:10;" onClick="hide_liste('texte1', 'liste1','listed');" onblur="liste_lostfocus('texteb', 'listed', 'liste1');">
</div>
&nbsp&nbsp<input type=button style="font-family:arial;" value="Add to list" onclick="insert_new('texteb', 'listed');">

<div id="liste1" STYLE="position:absolute;display:none;">
	<select id=listed size=10 style="width:160px;position:absolute;" onClick="getValue('texteb', 'listed', 'liste1');" onkeydown="enter_list('texteb', 'listed', 'liste1');">
  		<option VALUE="Item1">Item1-2</option >
  		<option VALUE="Item2">Item2</option>
  		<option VALUE="Test">Test</option>
  		<option VALUE="Item3">Item3</option>
	</select>
</div>
<br>résultat
<br><br><br>
</body>
<html>

A voir également

Ajouter un commentaire

Commentaires

shadow52
Messages postés
6
Date d'inscription
lundi 13 novembre 2000
Statut
Membre
Dernière intervention
20 septembre 2007
-
Je tiens a signaler qu'il y a des erreurs dans le code html !!!
tu declare des imput comme ça :
<input type="text" name="texteb"
et tu veux recuperer une de ses valeurs comme ça :
document.getElementById('listed').selectedIndex

cest pas trop possible il me semble
liubov
Messages postés
1
Date d'inscription
lundi 18 février 2002
Statut
Membre
Dernière intervention
1 novembre 2006
-
Ayant le même besoin, j'étais parti tête dans le guidon pour arriver sensiblement à la même chose. Alors merci pour ton code. Vraiment dommage que le combo box de formulaire n'aie pas été conçu pour la sélection ET l'écriture de valeur ...
marc
atschum
Messages postés
1
Date d'inscription
mardi 27 avril 2004
Statut
Membre
Dernière intervention
5 septembre 2006
-
Super ça sera bien utile.

Merci
cs_harlock59
Messages postés
10
Date d'inscription
lundi 12 mai 2003
Statut
Membre
Dernière intervention
17 avril 2009
-
ca n'a pas l'air de fonctionner avec firefox...
et avec ie, (sous xp sp2) il faut autoriser l'interactivité.
de plus, dès que l'on ferme la page, la liste s'efface...
sinon, c'est un bon debut.
il faudrait créer un fichier contenant les éléments de la liste, ou bien les stocker en mysql dans une base, mais là on depasse le javascript...
et dommage que l'on ne puisse pas débuter avec une liste vide, car on ne peut pas supprimer item 1-2, 2 et 3.
Vandelan
Messages postés
1
Date d'inscription
mercredi 28 mai 2003
Statut
Membre
Dernière intervention
18 mai 2004
-
Super comme code
J'ai longtemps chipoté pour arriver à ce résultat et je n'y suis pas arriver. Ca donne des idées.

Merci et bonne continuation

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.