begin process at 2010 02 10 14:31:01
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

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

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


 Information sur la source

Note :
8,67 / 10 - par 6 personnes
8,67 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Niveau :Initié Date de création :22/07/2005 Vu / téléchargé :7 415 / 1 573

Auteur : nesk01

Ecrire un message privé
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"),do cument.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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

Source avec Zip Source avec une capture CALCULS RAYNAUX V2 par Ali Bibi
Source avec Zip Source avec une capture VALIDATION D'UN FORMULAIRE par grarestephane
Source avec Zip Source avec une capture CHAT VIRTUEL par grarestephane
Source avec Zip Source avec une capture AJOUTER ET SUPPRIMER DES FICHIERS DANS UNE LISTE par grarestephane
Source avec Zip TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet

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

Commentaire de hindphp le 28/10/2008 15:39:11

j'arrive pas à le réaliser pouvez vous m'aider SVP?

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,952 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales