Yann Droniou
Voilà + des petites options
y.droniou@voila.fr
<HTML>
<HEAD>
<TITLE>JScript - Annuaire téléphonique par liste déroulante</TITLE>
<META NAME="Generator" CONTENT="Matizha Sublime 3.0">
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Author" CONTENT="">
</HEAD>
<BODY>
<HTML><HEAD>
<TITLE>Répertoire téléphonique avec recherche par clavier</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var Liste=new CreerListe("NP", 5, 200)
Liste.Add("AAAA Jean-Marc","Tél.:04.78.79.00.00 - 06.xx.xx.xx.xx");
Liste.Add("ALLIROL Anne-Marie","04.78.79.00.00");
Liste.Add("AZZOUG Karim","04.78.79.00.00");
Liste.Add("BARRIOZ François","04.78.79.00.00");
Liste.Add("BENAISSA Mohamed","04.78.79.00.00");
Liste.Add("BENJAMIN Pascal","04.78.79.00.00");
Liste.Add("BOUABSA Sophiane","04.78.79.00.00");
Liste.Add("BOURGIN Jacky","04.78.79.00.00");
Liste.Add("BOUZON Gérard","04.78.79.00.00");
Liste.Add("BOUZON Robert","xx.xx.xx.xx.xx");
Liste.Add("BRANT Luc","04.78.79.00.00");
function CreerListe(nom, hauteur, largeur) {
this.nom=nom; this.hauteur=hauteur; this.largeur=largeur;
this.search="";
this.nb=0;
this.Add=AddItem;
this.Afficher=AfficherListe;
this.MAJ=MAJListe;
}
function AddItem(Perso,Autre,Tell,Addres) {
var item = new Object;
item.Perso=Perso;
item.Tell=Tell;
item.Autre=Autre;
item.Addres=Addres;
this[this.nb]=item
this.nb++;
}
function AfficherListe() {
if (document.layers) {
var Z="<SELECT name="+this.nom+" size="+this.hauteur+">";
} else {
var Z="<SELECT name="+this.nom+" size=10 style='width:200' onChange='Afficher(this.value)'>";
}
document.all.nbrvalue.innerText=this.nb
for (var i=0; i<this.nb; i++) {
Z+="<OPTION value="+i+" >"+this[i].Perso+"</OPTION>"
}
Z+="</SELECT>"
document.write(Z);
}
function MAJListe(txt,f) {
if (txt!=this.search) {
this.search=txt
f.elements[this.nom].options.length=0;
for (var i=0; i<this.nb; i++) {
if ( this[i].Perso.substring(0,txt.length).toUpperCase()==txt.toUpperCase() ) {
var o=new Option(this[i].Perso,i );
f.elements[this.nom].options[f.elements[this.nom].options.length]=o;
}
}
if (f.elements[this.nom].options.length==1) {
f.elements[this.nom].selectedIndex=0;
}
}
}
function ListeCheck() {
Liste.MAJ(document.forms["monform"].search.value,document.forms["monform"])
if (document.layers) {
setTimeout("ListeCheck()", 1001)
} else {
setTimeout("ListeCheck()", 100)
}
}
function Afficher(Nom)
{
NOM=Liste[Nom].Perso
AUTRE=Liste[Nom].Autre
TEl=Liste[Nom].Tell
ADRESSE=Liste[Nom].Addres
TELMOIN=TEl.substring(0,5)
TELPLUS=TEl.substring(5,TEl.length)
ADRESSEMOIN=ADRESSE.substring(0,9)
ADRESSEPLUS=ADRESSE.substring(9,ADRESSE.length)
document.all.nompre.innerText="Nom : "+NOM
document.all.autre.innerText=AUTRE
if(TELMOIN!="/Tel/")
document.all.tel.innerText="Tel : "+TEl
else
document.all.tel.innerText=TELPLUS
if(ADRESSEMOIN!="/Adresse/")
document.all.adresse.innerText="Adresse : "+ADRESSE
else
document.all.adresse.innerText=ADRESSEPLUS
}
function Listea()
{
NBR=nbrvalue.innerText
Z='<a href="javascript:window.history.go(-1)">Retour</a><br><br>Nombre de la liste :'+NBR+'<br><table border="1" width="100%"><tr><td>Nom</td><td>Teléphone</td><td>Adresse</td></tr>'
for(m=0;m<NBR;m++)
{
nom=Liste[m].Perso
tell=Liste[m].Tell
adressea=Liste[m].Addres
telmoin=tell.substring(0,5)
telplus=tell.substring(5,tell.length)
adressemoin=adressea.substring(0,9)
adresseplus=adressea.substring(9,adressea.length)
if(adressemoin=="/Adresse/")
adressea=adresseplus
if(telmoin=="/Tel/")
tell=telplus
if(adressea=="")
adressea="?"
if(tell=="")
tell="?"
Z+='<tr><td>'+nom+'</td><td>'+tell+'</td><td>'+adressea+'</td></tr>'
}
Z+='</table>'
document.write(Z)
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#FAFAFF" alink="#000066" link="#000066" vlink="#000066" >
<FONT FACE="Arial" SIZE='-1' COLOR="navy">
<BR><CENTER>
<BIG><B>Répertoire téléphonique avec recherche par clavier</B></BIG><BR><BR></CENTER>
<BR>
Tapez les premières lettres du nom recherché dans la zone de texte. <BR>
<BR><BR>
<a href="javascript:Listea()">Afficher la liste</a>
<BR>
Nombre de liste :<div id="nbrvalue"></div><br>
<FORM name=monform>
<INPUT type=text name=search><BR>
<SCRIPT language=javascript>
Liste.Afficher();
ListeCheck();
</SCRIPT>
<div id="nompre"></div><br>
<div id="autre"></div>
<div id="tel"></div>
<div id="adresse"></div>
</FORM>
</SCRIPT>
</FORM>
<BR><BR><BR>
<BR>
</CENTER>
</BODY></HTML>
-------------------------------
Réponse au message :
-------------------------------
> Bonjour,
>
>
> Je suis tout nouveau en JavaScript.
>
> J'apprends en solo avec un tutétoriel en ligne (Matizha Sublime).
>
> Je me suis inspiré d'un code "Liste déroulante avec les noms de pays" pour essayer de faire un annuaire téléphonique.
>
> J'arrive à faire apparaitre mes noms (o magie !!!), mais comment peut-on associer les numéros de téléphones (genre alert , checkbox ou popup) ?????
>
> J'ai rajouté une variable "telephone" que je n'arrive pas à utiliser.
> Le but de ma liste déroulante serait de cliquer sur un nom de l'annuaire pour faire apparaitre une nouvelle fenetre dans laquelle figurerait le numéro de téléphone.
>
> Je remercie par avance les personnes susceptibles de m'aider.
>
> <HTML>
> <HEAD>
> <TITLE>JScript - Annuaire téléphonique par liste déroulante</TITLE>
> <META NAME="Generator" CONTENT="Matizha Sublime 3.0">
> <META NAME="Description" CONTENT="">
> <META NAME="Keywords" CONTENT="">
> <META NAME="Author" CONTENT="">
> </HEAD>
> <BODY>
> <HTML><HEAD>
> <TITLE>Répertoire téléphonique avec recherche par clavier</TITLE>
> <SCRIPT LANGUAGE="JavaScript">
>
> var Liste=new CreerListe("Nom", "Telephone", 5, 200)
>
> Liste.Add("AAAA Jean-Marc","Tél.:04.78.79.00.00 - 06.xx.xx.xx.xx");
> Liste.Add("ALLIROL Anne-Marie","04.78.79.00.00");
> Liste.Add("AZZOUG Karim","04.78.79.00.00");
> Liste.Add("BARRIOZ François","04.78.79.00.00");
> Liste.Add("BENAISSA Mohamed","04.78.79.00.00");
> Liste.Add("BENJAMIN Pascal","04.78.79.00.00");
> Liste.Add("BOUABSA Sophiane","04.78.79.00.00");
> Liste.Add("BOURGIN Jacky","04.78.79.00.00");
> Liste.Add("BOUZON Gérard","04.78.79.00.00");
> Liste.Add("BOUZON Robert","xx.xx.xx.xx.xx");
> Liste.Add("BRANT Luc","04.78.79.00.00");
>
> function CreerListe(nom, telephone, hauteur, largeur) {
> this.nom=nom; this.hauteur=hauteur; this.largeur=largeur; this.telephone=telephone;
> this.search="";
> this.nb=0;
> this.Add=AjouterItem;
> this.Afficher=AfficherListe;
> this.MAJ=MAJListe;
> }
>
> function AjouterItem(item) {
> this[this.nb]=item
> this.nb++;
> }
>
> function AfficherListe() {
> if (document.layers) {
> var Z="<SELECT name="+this.nom+" size="+this.hauteur+">";
> } else {
> var Z="<SELECT name="+this.nom+" size="+this.hauteur+" style='width:"+this.largeur+"'>";
> }
> for (var i=0; i<this.nb; i++) {
> Z+="<OPTION value=\""+this[i]+"\">"+this[i]+"</OPTION>"
> }
> Z+="</SELECT>"
> document.write(Z);
> }
>
> function MAJListe(txt,f) {
> if (txt!=this.search) {
> this.search=txt
> f.elements[this.nom].options.length=0;
> for (var i=0; i<this.nb; i++) {
> if ( this[i].substring(0,txt.length).toUpperCase()==txt.toUpperCase() ) {
> var o=new Option(this[i], this[i]);
> f.elements[this.nom].options[f.elements[this.nom].options.length]=o;
> }
> }
> if (f.elements[this.nom].options.length==1) {
> f.elements[this.nom].selectedIndex=0;
> }
> }
> }
>
> function ListeCheck() {
> Liste.MAJ(document.forms["monform"].search.value,document.forms["monform"])
> if (document.layers) {
> setTimeout("ListeCheck()", 1001)
> } else {
> setTimeout("ListeCheck()", 100)
> }
> }
>
>
>
>
> function AfficheHeure() {
> var dt=new Date();
> var heure=dt.getHours();
> var min=dt.getMinutes(); if (min<10) {min="0"+min;}
> var sec=dt.getSeconds(); if (sec<10) {sec="0"+sec;}
> window.status="Il est exactement: "+heure+":"+min+":"+sec+""
> setTimeout("AfficheHeure()",1000);
> }
>
>
> </SCRIPT>
> </HEAD>
> <BODY bgcolor="#FFFFFF" text="#FAFAFF" alink="#000066" link="#000066" vlink="#000066" >
> <FONT FACE="Arial" SIZE='-1' COLOR="navy">
> <BR><CENTER>
> <BIG><B>Répertoire téléphonique avec recherche par clavier</B></BIG><BR><BR></CENTER>
>
> <BR>
> Tapez les premières lettres du nom recherché dans la zone de texte. <BR>
> <BR>
> <FORM name=monform>
> <INPUT type=text name=search><BR>
> <SCRIPT language=javascript>
> Liste.Afficher();
> ListeCheck();
> AfficheHeure()
>
> </SCRIPT>
> </FORM>
>
>
> <BR><BR><BR>
> <BR>
> </CENTER>
>
> </BODY></HTML>
>
>
>
> Jean-Marc