1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Liste déroulante avec champ texte. -- ie

Liste déroulante avec champ texte. -- ie

Soyez le premier à donner votre avis sur cette source.

Snippet vu 34 101 fois - Téléchargée 28 fois

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

Ajouter un commentaire Commentaires
Signaler
Messages postés
3
Date d'inscription
lundi 13 mars 2006
Statut
Membre
Dernière intervention
19 mai 2007
c'est gegnale !!!!!!!!!:!c'est ce que je cherche mercie bien
Signaler
Messages postés
6
Date d'inscription
lundi 12 février 2007
Statut
Membre
Dernière intervention
13 avril 2007
génial
mais comment faire pour que ça marche sur FIREFOX ??
svp c trés urgent
merci
Signaler
Messages postés
3
Date d'inscription
jeudi 21 octobre 2004
Statut
Membre
Dernière intervention
30 octobre 2017
Salut,

Je ne veux pas être bêbête, mais qu'es-ce que c'est supposé de faire ce source? J'utilise IE7 et tout ce que je vois, c'est un drop list avec des URL que je peux sélectionnés. Mais es-ce que sa devrait diriger mon browser sur une des page sélectionnées?

Je n'est pas la prétention de dire que je connais bien l'ASP, mais je suis dans une impasse depuis qq jours. En fait, je suis à la recherche d'un bout de code qui puisse me permettre de générer 4 listes pour sélectionner famille ou goupe ou sous-groupe ou type de résultat et de générer une table qui puisse me donner comme titre la famille et/ou le groupe et/ou le sous-groupe et/ou le type avec des rows de différentes couleurs (gris, blanc)... Qui peut m'aider?

Salut et merci d'avoir pris le temps de me lire, au plaisir d'avoir de vos nouvelles sous peu.
Signaler
Messages postés
1
Date d'inscription
jeudi 27 avril 2006
Statut
Membre
Dernière intervention
7 juin 2006
sos please!
moi je suis une débutante dans la programmation et là j'ai un problème. j'ai créé une liste déroulante avec des options dedans. à coté de cette liste figure un champ de saisie. j'aimerai qu'à chaque fois que je sélectionne une option (un clic sur l'option)elle apparaisse dans le champ de saisie. la suivante sélectionnée se met derrière la première et ainsi de suite.
Pouvez-vous m'aider svp??? c hyper urgent.
Merci d'avance
à+
Signaler
Messages postés
3
Date d'inscription
mardi 23 mai 2006
Statut
Membre
Dernière intervention
23 mai 2006
merci beaucoup c'est joli
Afficher les 14 commentaires
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)