Je n'arrive pas à faire marcher ce code sur
FIREFOX :
<html>
<head>
<title>document.getElementById("liste") déroulante éditable</title>
<script language="JavaScript" type="text/javascript">
<!--
// Tableau contenant les éléments de la document.getElementById("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 document.getElementById("liste") par ordre alphabétique.
listes.sort();
// Ajuste la taille des objets par rapport à la taille du champ texte.
function Init() {
document.getElementById("cadre").style.pixelLeft=document.getElementById("ObjListe").offsetLeft;
document.getElementById("cadre").style.pixelTop=document.getElementById("ObjListe").offsetTop+document.getElementById("ObjListe").offsetHeight;
document.getElementById("cadre").style.width=document.getElementById("ObjListe").scrollWidth;
document.getElementById("liste").style.width=document.getElementById("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 document.getElementById("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 document.getElementById("liste"))
function EffacCell() {
var e;
e=new Enumerator(document.getElementById("liste").rows);
for (;!e.atEnd();e.moveNext()) {
document.getElementById("liste").deleteRow(e.item().rowIndex);
}
}
// Crée une cellule. (Un élément dans la document.getElementById("liste").)
function CreaCell() {
var ligne, cellule;
ligne=document.getElementById("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 document.getElementById("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.
}
}
document.getElementById("cadre").style.visibility="visible";
}
// Affiche la document.getElementById("liste") lorsque l'on click sur la flèche.
function Deroule(event) {
var e, objet;
objet=event.srcElement; // Efface la document.getElementById("liste") pour éviter qu'elle se
EffacCell(); // répète.
if (objet.id!="down") { // Cache la document.getElementById("liste") si l'on a pas clicker
document.getElementById("cadre").style.visibility="hidden"; // sur la flèche.
}
else {
for (i=0;i<listes.length;i++) { // Crée tous les éléments de la document.getElementById("liste").
CreaCell();
}
document.getElementById("cadre").style.visibility="visible";
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onload="javascript:Init();" onclick="javascript:Deroule(event);">
<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 document.getElementById("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>