Enfin une liste deroulante (combobox) modifiable

Commenter

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

S'inscrire maintenant

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.

Du même auteur (dadavyvy)