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

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

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)