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

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2009 01 10 02:10:42

[TIPS] EVITER LE DOUBLE CLICK SUR UN POSTBACK par Luke77

STYLECOP ET FXCOP par Mona7170

QUESTION SQL SERVER POUR LES EXPERTS par RaptorXP

[OPEN XML] LES LIENS ET LES TWITTERS DE LA SEMAINE 05/01/2009 par neodante

[WPF] COMMENT ASSIGNER UNE RESSOURCE DYNAMIQUE DEPUIS LE CODE-BEHIND ? par Thomas LEBRUN

REPONSE : RéSOLUTION D'éCRAN par alaindu_33

RE : PROBLèME POUR CHANGER LE DOCUMENT.BGCOLOR DANS IE par scratchdesign

RE : MAITRISE D'UN COPIER/COLLER DANS UNE IFRAME par LHUZ

PROBLèME POUR CHANGER LE DOCUMENT.BGCOLOR DANS IE par scratchdesign

RE : MAITRISE D'UN COPIER/COLLER DANS UNE IFRAME par Bul3

+ de logiciels à télécharger

1 331 356 membres
37 nouveaux aujourd'hui
14 644 membres club

Trouver une ressource

Trouvez une ressource parmi 39 269 codes, 1 223 701 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

RECHERCHE DANS UNE LISTE À PARTIR D'UN CHAMP DE TEXTE

Information sur la source

Catégorie :Formulaire Niveau : Initié Date de création : 22/07/2005 Vu / téléchargé: 6 328 / 1 452

Auteur : nesk01

Ecrire un message privé

Note :

8,67 / 10

Commentaire sur cette source (25)

Ajouter un commentaire et/ou une note

Description

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

/*
* Classe SearchList
*
* 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];
}
}
}
}

/*
*	Classe SearchList
*
*	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 ;)

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

searchlist.js 4 180 octets
test.html 810 octets

Télécharger le zip

Sources de la même categorie

VÉRIFICATION DU NUMÉRO DE TVA INTRACOMMUNAUTAIRE D'UNE SOCIÉ... par vilfarfadet

OBLIGER UN UTILISATEUR DE COCHER UNE CHECKBOX POUR VALIDER U... par yoyo17560

UPLOAD PLUSIEURS FICHIERS FANCYUPLOAD V2 par mnouzahir

ESTIMATION DU DEGRÉ DE CONFIANCE À ACCORDER À UN MOT DE PASS... par vilfarfadet

SLIDER (CURSEUR VARIABLE) ÉLÉMENT JAVASCRIPT par kgilbert

Toutes les sources de la catégorie Formulaire

Commentaires et avis

Commentaire de MATHIS49 le 25/07/2005 21:33:35

il y a til un exemple en ligne ?
merci

Commentaire de rttb le 27/07/2005 10:12:10

Super cette source, claire, facile à mettre en place et très utile en plus.
Peut-être elle me servira plus tard, je la garde sous le coude.
Merci.

Commentaire de rttb le 22/09/2005 19:09:49

Je me suis permis de rajouter une option dans ton script :
Quand on selectionne une valeur dans la liste, le champ texte (input) prends la valeur (affichée) de la liste.

voici le code de la fonction :

SearchList.prototype.MAJinput=function(){

this.text.value=this.select[this.select.selectedIndex].text;

}

et sur le champ <select> l'evenement suivant :

onclick="javascript:liste.MAJinput();"

Voila, merci encore pour ce script, je vais certainement m'en servir sur un site, je te tiens au courant...

Commentaire de dedeazer le 26/02/2006 10:29:07

Source très utile et en plus facile à mettre en place même pour un débutant comme moi.

Par contre il va me falloir du temps pour comprendre son code mais je vais apprendre beaucoup.

Encore bravo à son auteur.

Merci.

Commentaire de dedeazer le 03/03/2006 20:08:58

Quelqu'un sait-il si on peut convertir ce code sous access ou du moins faire la même chose ?

J'aimerais pouvoir faire la même chose c'est à dire une recherche dynamique dans une liste sous access. Cela parait-il possible à quequ'un du forum ? Peut-être que cela a déjà été fait ? Dans ce cas merci de me dire où je pourrais trouver. merci d'avance pour une réponse.

Très cordialement

Commentaire de dedeazer le 06/03/2006 21:33:53

Bonsoir,

Désolé pour la question sur ce site qui semble intérésser personne.

J'ai trouvé ma réponse. En faite, sous access une liste déroulante modifiable à naturellement la propriété d'afficher le compte-tenu de la liste au fur et à mesure que l'on tape les lettres.

Merci quand même

Je ne regrette pas mon inscription sur ce site super par ailleurs

Commentaire de salooh le 23/05/2006 11:43:57

salut,
ma question c a propos une liste deroulante qui est au meme temps saisissable c-a-d on peux ajouter des champs dynamiquemant

Commentaire de usamike le 10/11/2006 16:40:44

ça ne fonctionne que sous IE !!! zut !

Commentaire de rttb le 10/11/2006 17:19:56

Je ne suis pas l'auteur de cette source mais elle fonctionne parfaitement sous IE et FIREFOX, les autres je ne sais pas.

Commentaire de usamike le 10/11/2006 17:54:58

non, ça ne fonctionne pas sous Firefox 2RC3, ni sous Mozilla 1.7.13 (windows)

Commentaire de rttb le 10/11/2006 18:04:46

Essais sur cette page : http://www.vacances-pyrenees.info/site-pyrenees.html
La recherche de la ville...
De chez moi cela fonctionne

Commentaire de usamike le 10/11/2006 20:19:39

oui je confirme cela marche.
je m'étais trompé.
pardon.

Commentaire de rttb le 11/11/2006 08:07:13

Pas de problème. Peut être une petite erreur dans ton script pour que cela ne finctionne pas sous moz.

Commentaire de jmeunier le 11/11/2006 10:54:17

comment procéder pour enlever un "selected" précédent ?
Je m'explique :
Dans la zone text je saisie des lettres et l'application me propose les champs correspondants.
Je selectionne un choix.
Je voudrais que dès la modification de la zone text, le choix sélectionné précédemment soit dévalidé (aucun selected).

très bon code ! et je vais l'utiliser ...
Merci

Commentaire de rttb le 12/11/2006 10:50:48

Je ne comprends pas quel est la question, vous voulez "unselect" la liste (le select) lors de la saisie dans la zone texte ?

Commentaire de jmeunier le 12/11/2006 11:54:59

en fait, lorsque je fais un select dans la liste, je mets sa valeur dans la zone texte.
ex : je selectionne Belgique, la zone texte est ègale à Belgique.
Maintenent, je me positionne dans cette zone texte et je supprime la dernière lettre, ce qui donne Belgiqu.
Je voudrais que la liste du select me propose Belgique sans que ce choix sit selected.

J'ai essayé ça mais ca ne marche pas :

SearchList.prototype.MAJListe=function(){
    document.getElementById("texte").style.color = "red"
    var search=this.text.value;

for (i=0;i<this.allOptions.length;i++){
if (this.allOptions[i].selected == true)
   {
   alert(this.allOptions[i].text);
   this.allOptions[i].selected = false;
   alert(this.allOptions[i].selected);
   }
}
Le 2ème alert est toujours égal à true ...

Merci

Commentaire de rttb le 13/11/2006 09:05:45

this.allOptions[i].selected = false; me semble être LA solution, mais si cela ne fonctionne pas, pose la question sur le forum, et si tu trouves, poste la solution ici.

Commentaire de jmeunier le 13/11/2006 13:02:28

mettre à la place de la boucle for ... :

this.select.selectedIndex=-1;

Réponse trouvée sur fr.comp.lang.javascript

Commentaire de jmeunier le 25/11/2006 11:04:55

Une question bête ...

Comment faire pour mettre plusieurs select de ce type dans une même page ?

Commentaire de rttb le 26/11/2006 10:20:02

je n'ai pas essayé mais en theorie :
Avec deux select : nomSelect et nomSelect1
Et deux input : nomInput et nomInput1

var maListe=new SearchList(document.getElementById("nomSelect"),document.getElementById("nomInput"));
var maListe1=new SearchList(document.getElementById("nomSelect1"),document.getElementById("nomInput1"));

A tester...
Tenez nous au courant.

Commentaire de jmeunier le 26/11/2006 10:58:05

oui, oui, j'avais essayé ça avant de poster.

Il n'y a que le 2ème select qui fonctionne.
J'ai essayé de "doubler" le code avec un newSearcList2 mais j'ai du mal m'y prendre.
Je ne m'en sors pas. snif !

Commentaire de tokyo le 27/02/2007 16:03:07

bonjour,

de la même façon que l'on peut gérer la casse,
pourrait t-on immaginer gérer les accents et cédilles ?

merci si quelqu'un a une idée ?

Commentaire de porgy le 22/09/2007 22:07:22

super code mais pourrait on faire la meme chose en affichant les item qui conteinnet le texte ( aujourd'hui cela affiche que ceux qui commencent par la saisie).

de meme comment peut on passer le nom du controle si on possede deux dropdowlist dans la page.
Merci

Commentaire de jmeunier le 23/09/2007 11:07:53

Pour PORGY :

remplacer

#  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];

par

#  if(!this.caseSensitive){
# if(this.allOptions[i].text.toUpperCase().indexOf(search.toUpperCase())>-1)
# this.select.options[this.select.options.length]=this.allOptions[i];
# }
# else{
# if(this.allOptions[i].text.indexOf(search)>-1)
# this.select.options[this.select.options.length]=this.allOptions[i];