1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Formulaire
  5. Recherche dans une liste à partir d'un champ de texte

Recherche dans une liste à partir d'un champ de texte

Soyez le premier à donner votre avis sur cette source.

Vue 13 585 fois - Téléchargée 1 985 fois

Télécharger le projet
Commenter

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 / Exemple : 


/*


  • 	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 ;)
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
porgy
Messages postés
14
Date d'inscription
jeudi 12 octobre 2000
Statut
Membre
Dernière intervention
29 janvier 2017
29 janv. 2017 à 11:35
Bonjour,
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
nyuuh
Messages postés
1
Date d'inscription
lundi 1 octobre 2012
Statut
Membre
Dernière intervention
18 février 2013
18 févr. 2013 à 18:15
Salut,
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?
dyskol
Messages postés
2
Date d'inscription
vendredi 19 mai 2006
Statut
Membre
Dernière intervention
31 janvier 2012
31 janv. 2012 à 09:07
Bonjour,

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
dyskol
Messages postés
2
Date d'inscription
vendredi 19 mai 2006
Statut
Membre
Dernière intervention
31 janvier 2012
27 janv. 2012 à 15:41
Bonjour à tous,

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 !
hindphp
Messages postés
2
Date d'inscription
mercredi 12 mars 2008
Statut
Membre
Dernière intervention
12 novembre 2008
28 oct. 2008 à 15:39
j'arrive pas à le réaliser pouvez vous m'aider SVP?
S'inscrire maintenant

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.

Du même auteur (nesk01)