Liste déroulante avec champ texte. -- ie

Commenter

Contenu du snippet

Voici un bout de code pour utiliser une liste de sélection à la manière de la barre d'adresse de votre navigateur.
La liste affiche les résultats correspondants au texte entré.
Utilisation de tableaux dynamiques.

Source / Exemple : 


<html>
<head>
<title>Liste déroulante éditable</title>
<script language="JavaScript" type="text/javascript">
<!--

// Tableau contenant les éléments de la liste.
var listes;
listes= new Array();
listes[0]="http://www.javascriptfr.com";
listes[1]="http://www.aspfr.com";
listes[2]="http://www.delphifr.com";
listes[3]="http://www.asp-irine.com";
listes[4]="http://msdn.microsoft.com/library";
listes[5]="http://www.asp-magazine.com";
listes[6]="http://devedge.netscape.com/";
listes[7]="http://www.w3.org";
listes[8]="http://www.laltruiste.com";
listes[9]="http://www.3dvf.com";
listes[10]="http://www.allapi.net";
listes[11]="http://www.wotsit.org";
listes[12]="http://therionweb.de/";
listes[13]="http://www.asp-php.net/";
listes[14]="http://phidels.com/";

// Classe la liste par ordre alphabétique.
listes.sort();					 		  

// Ajuste la taille des objets par rapport à la taille du champ texte.
function Init() {
cadre.style.pixelLeft=ObjListe.offsetLeft;
cadre.style.pixelTop=ObjListe.offsetTop+ObjListe.offsetHeight;
cadre.style.width=ObjListe.scrollWidth;
liste.style.width=ObjListe.scrollWidth;
document.form.champ.focus();
}
// Mise en sur brillance de l'élément survolé. 
function RollOver() {
var objet;
objet=event.srcElement;
objet.style.backgroundColor="highlight";
objet.style.borderWidth="1";
objet.style.borderStyle="dashed";
objet.style.borderColor="black";
objet.style.color="white";
}

// Retour à l'état normal de l'élément de la liste.
function RollOut() {
var objet;
objet=event.srcElement;
objet.style.backgroundColor="white";
objet.style.borderWidth="0";
objet.style.color="black";
}

// Affichage de l'élément sélectionné dans le champ texte.
function Selecte() {
var objet;
objet=event.srcElement;
document.form.champ.value=objet.innerHTML;
}

// Efface toutes les cellules du tableau.(Tous les éléments de la liste)
function EffacCell() {
var e;
e=new Enumerator(liste.rows);
for (;!e.atEnd();e.moveNext()) {
      liste.deleteRow(e.item().rowIndex);
} 
}

// Crée une cellule. (Un élément dans la liste.)
function CreaCell() {
var ligne, cellule;
ligne=liste.insertRow(); 		// Insère une ligne dans le tableau.
cellule=ligne.insertCell();		// Insère une cellule dans la ligne.
with (cellule) {						
       noWrap=true;			 // Définit les propriétés
       style.cursor="default";		 // et événements.
       onmouseout=RollOut;
       onmouseover=RollOver;
       onclick=Selecte;	
       innerHTML=listes[i];		 // Insère le texte dans la cellule.
}
}

// Cherche toutes les occurrences du champ texte dans le tableau de la liste.
function Cherche() {
    var text, temp;
    EffacCell();         
    text=document.form.champ.value;
    text=text.toLowerCase();	      // Change le texte en minuscule pour simplifier.
    for (i=0;i<listes.length;i++) {
        temp=listes[i];
        temp=temp.toLowerCase();     // Position de recherche: 7 pour enlever "http://"
 			     // et 11 pour enlever "http://www."
			     // 0 pour chercher à partir du premier caractère.
         if (temp.indexOf(text)==7 || temp.indexOf(text)==11 || temp.indexOf(text)==0) {
	CreaCell();	    // Crée un élément pour chaque occurrence trouvée.
         }
    }
    cadre.style.visibility="visible";
}

// Affiche la liste lorsque l'on click sur la flèche.
function Deroule() {
var e, objet;
objet=event.srcElement;	 // Efface la liste pour éviter qu'elle se
EffacCell();  		 // répète.
if (objet.id!="down") {	 // Cache la liste si l'on a pas clicker 
    cadre.style.visibility="hidden";	 // sur la flèche.
}
else {        
    for (i=0;i<listes.length;i++) { 	 // Crée tous les éléments de la liste.
        CreaCell();
    }
cadre.style.visibility="visible";
}
}

//-->
</script>

</head>

<body bgcolor="#FFFFFF" text="#000000" onload="javascript:Init();" onclick="javascript:Deroule();">
<form name="form">

<!-- Tableau contenant le champ texte et la flèche. //-->
<div nowrap id="ObjListe" style="border-width:2;border-style:inset;border-color:white;width:0;display:inline;">
<input type="text" value="" name="champ" size="20" style="border-width:0;font-size:14;" onkeyup="javascript:Cherche();">
<input id="down" type="button" value="6" style="line-height:0;height:18;font-family:webdings;font-size:10;">
</div>
<!-- Tableau contenant la liste de sélection. -->
<div id="cadre" style="position:absolute;height:100;visibility:hidden;border-width:1;border-style:solid;border-color:black;overflow-x:hidden;overflow-y:scroll;">
<table id="liste" border="0" cellpadding="0" cellspacing="0">
</table>
</div>

</form>
</body>
</html>

Conclusion :


Il reste encore quelques améliorations possibles comme par exemple l'utilisation des flèches du clavier pour parcourir la liste.
La valeur "inline" de la propriété "display" permet de placer les composants de formulaire suivants sur la même ligne mais un léger décalage apparaît.

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 (Kharneth)