Une classe JS qui permet de reduire les options d'une liste de choix à partir du contenu d'un champ de texte :
en saisissant le debut du mot/nom dans une zone de texte, la liste ne contiendra plus que les elements qui commence par votre saisie !
tres simple de fonctionnement ! il faut juste :
1/ Inclure le js dans la page
2/ DANS LA PAGE (et non pas entre les <head></head>) :
creer un objet SearchList en passant en parametre les objet html concerné
par exemple:
var maListe=new SearchList(document.getElementById("nomSelect"),document.getElementById("nomInput"));
où "nomSelect" représente l'id de l'element "select" (la liste)
et "nomInput" représente l'id de l'element "input" (le champ de texte)
eventuellement un troisieme parametre à "true" si vous voulez que la recherche respecte la casse...
Source / Exemple :
/*
*
- Permet de rendre une liste dynamique : la saisie dans un champ de texte
- réduit le nombre d'élement dans la liste => "Liste de recherche"
*
- le 21/07
- Antoine Detante
- /
/*
- Constructeur de la classe
*
- @param htmlselect, une référence vers l'objet "select" représentant la liste
- @param htmltext, une référence vers l'objet "input" représentant le champ de texte
- @param caseSensitive, paramètre optionnel, si "caseSensitive" est à "true", alors
- la recherche dans la liste s'effectuera en respecant la casse
- /
function SearchList(htmlselect,htmltext,caseSensitive){
this.select=htmlselect;
this.text=htmltext;
this.allOptions=new Array();
for(i=0;i<this.select.options.length;i++){
this.allOptions[i]=this.select.options[i];
}
this.caseSensitive=false;
if(caseSensitive)
this.caseSensitive=true;
}
/*
- Vide le contenu de la liste
- /
SearchList.prototype.viderListe=function(){
var length=this.select.options.length;
for(i=length-1;i>=0;i--){
this.select.options[i]=null;
}
}
/*
- Restore le contenu de la liste avec les valeurs initiales
- /
SearchList.prototype.restoreListe=function(){
for(i=0;i<this.select.options.length;i++){
this.select.options[i]=null;
}
for(i=0;i<this.allOptions.length;i++){
this.select.options[i]=this.allOptions[i];
}
}
/*
- Met à jour le contenu de la liste en fonction
- du texte saisie dans le champ
- /
SearchList.prototype.MAJListe=function(){
var search=this.text.value;
if(search==""){
this.restoreListe();
return;
}
else{
this.viderListe();
for(i=0;i<this.allOptions.length;i++){
if(!this.caseSensitive){
if(this.allOptions[i].text.toUpperCase().indexOf(search.toUpperCase())==0)
this.select.options[this.select.options.length]=this.allOptions[i];
}
else{
if(this.allOptions[i].text.indexOf(search)==0)
this.select.options[this.select.options.length]=this.allOptions[i];
}
}
}
}
Conclusion :
Le zip contient la source JS + un exemple de page html toute simple
utilisant la classe
Pour infos/commentaires/remarques --> nesk01@gmail.com
De meme si vs utilisez cette classe un ptit mail fais tjs plaisir ;)
Commentaires
super code qui m'aide beaucoup, mais comment faire pour que cela recherche le texte contenu et pas commençant. J'aimerais qu'il reste dans la liste tous les items qui contiennent le texte donc si ca commence mais aussi si la chaine et dans un texte.
Merci
L'exemple test.html ne correspond pas à la description de ce que devrait faire le code (sous firefox 18.0.2)?
J'ai appliqué le tuto à mon site mais je n'ai pas du tout ce qui est dit dans la description? J'obtiens un champ texte qui semble "déconnecté" de ma liste déroulante... Quelqu'un a une idée?
J'ai la réponse à mon souci :
1er, il faut pour mon serveur convertir le .js en UTF8
Sinon marche pas du tout.
Et j'ai vu aussi ça, dans le input :
typt="text" id="texte" size="18"/
Au lieu de :
type
et un / qui à ma connaissance ne sert à rien
Encore merci pour le script
Merci beaucoup pour cette excellent script !
Surtout que j'en ai besoin (^_^)
Par contre j'ai un souci que je ne comprend pas, illogique.
Le script marche parfaitement en local.
Et quand je le mets en ligne, il ne marche pas ?
Je me suis donc dis que cela venait peut être d'une config au niveau du serveur.
Alors je l'ai installer sur un autre site (perso, celui où ça ne marche pas est pro) et là, ça fonctionne ! ?
J'ai envoyé un billet a l’hébergeur mais j'ai pas reçu de réponse.
Quelqu'un aurait une idée ?
D'avance merci !
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.