CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 11 02:45:16

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Formulaire

> LISTE DÉROULANTE AVEC CHAMP TEXTE. -- IE

LISTE DÉROULANTE AVEC CHAMP TEXTE. -- IE

Information sur la source

Note :

8,50 / 10

Catégorie :Formulaire Niveau :Initié Date de création :30/10/2002 Date de mise à jour :30/10/2002 10:28:07 Vu :30 598

Auteur : Kharneth

Ecrire un message privé

Commentaire sur cette source (15)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

<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">
<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>
<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>

<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.

Sources du même auteur

CACHER LE CODE SOURCE D'UNE PAGE -- IE 5+

Toutes les sources de Kharneth

Sources de la même categorie

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol

PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim

GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom

RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

Toutes les sources de la catégorie Formulaire

Commentaires et avis

Commentaire de iubito le 04/11/2002 14:44:53

génial!!!

Commentaire de bob3000 le 05/11/2002 17:23:58

super!

Commentaire de bob3000 le 05/11/2002 17:24:01

super!

Commentaire de bob3000 le 05/11/2002 17:24:03

super!

Commentaire de pesant le 10/01/2003 17:36:16

C'est génial !!! Beau boulot !!

Commentaire de b_medamine le 06/12/2005 18:11:56

mais ça ne fonctionne pas sur firefox .... comment faire .... Merci

Commentaire de mak2006 le 23/01/2006 09:38:38

bon script merci
comment mettre le contenu d'une table mysql à la place de
''''''''
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";
.....

merci pour vos reponses

Commentaire de webdesignasp le 26/01/2006 11:34:19

Salut,

ta question n'a pas de lien direct avec cette source et le langage javascript. Il s'agit plutôt d'un problème d'ordre général de passage de tableau de PHP à JAVASCRIPT et je te conseille donc de creuser de ce côté là en lisant, pour commencer, cette source par exemple :
http://www.phpcs.com/code.aspx?id=22362

a+

Commentaire de mak2006 le 08/03/2006 10:57:24

Meci pour votre aide
c'est exactement ce que j'ai besoin.
A+

Commentaire de stfou le 25/05/2006 18:09:22

super

Commentaire de salooh le 26/05/2006 12:32:13

merci beaucoup c'est joli

Commentaire de aminouchka le 07/06/2006 17:14:08

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
à+

Commentaire de umponcel le 08/02/2007 16:36:32

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.

Commentaire de araboss le 12/04/2007 18:47:09

génial
mais comment faire pour que ça marche sur FIREFOX ??
svp c trés urgent
merci

Commentaire de nadoucha le 05/05/2007 13:40:37

c'est gegnale !!!!!!!!!:!c'est ce que je cherche mercie bien

Ajouter un commentaire

Nos sponsors

Derniers Blogs

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

Forum

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

RE : CREATION DE SCORING OU RATING par buno

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011