TUTOS.EU

Combobox filtrée dynamiquement

Comment filtrer dynamiquement le contenu d une combobox

<HTML>

	<HEAD>
		<style>
			.sectionArticle{
				margin: 10px;
			}
			
			.MyButton {
				margin: 2px 0;
				width:155px;
			}
		</style>
	</HEAD>

	<BODY>

		<div id="sectionArticle" class="sectionArticle">
			<input type="text" id="TxtFenetreSaisie" onkeyup="ButtFiltrer(TabReferences, 'Liste01','TxtFenetreSaisie');"></INPUT> 
			<INPUT type="BUTTON" class="MyButton" value="Recherche"  onclick="ButtFiltrer(TabReferences, 'Liste01','TxtFenetreSaisie');"><br />
			
			<Select Name="Liste01" ID="Liste01">
				<!--<Option Selected></Option>-->
			</Select></TD>	
		</div>

		<SCRIPT TYPE="text/javascript">

			function recupValeurElement(IdElement)
			{
				if (document.getElementById)
				{
					return document.getElementById(IdElement);
				}
				else if (document.all)
				{
					return document.all[IdElement];
				}
			}

			function ButtFiltrer(TabMonCombo, $ElemAFilter,$ElemARechercher){

				var ObjAFiltrer = recupValeurElement($ElemAFilter);
				var TxtAChercher = recupValeurElement($ElemARechercher).value;
				var varPosition = 0;
				var Compteur;

				//On vide la liste
				ObjAFiltrer.length = 0;

				//Si il y a un élément à trouver
				if (TxtAChercher.length > 0){
					for (var CompteurTableau in TabMonCombo['text'])
					{
						UneValeur = TabMonCombo['text'][CompteurTableau];
						
						//Passage en minuscules
						UneValeur = UneValeur.toLowerCase();
						TxtAChercher = TxtAChercher.toLowerCase();
						//alert(UneValeur);

						varPosition = InStr(UneValeur,TxtAChercher,0);
						if (varPosition != -1){ //Si on a trouvé le caractère recherché
							AjouterElement($ElemAFilter,TabMonCombo['text'][CompteurTableau],TabMonCombo['value'][CompteurTableau]);
						}
					}
				
				}
				else{ //Si il n'y a rien à trouver, on remet toutes les valeurs dans la combobox
					for (var CompteurTableau in TabMonCombo['value'])
					{
							AjouterElement($ElemAFilter,TabMonCombo['text'][CompteurTableau],TabMonCombo['value'][CompteurTableau]);
					}				
				}
			}

			function InStr(varMaChaineDeCarac, CaracRecherche, PositionDebutRecherche)
			{

				var varPosition = 0;
			
				varPosition = varMaChaineDeCarac.indexOf(CaracRecherche, PositionDebutRecherche);

				/*
				if (varPosition != -1){ //Si on a trouvé le caractère recherché
					varMaChaineDeCarac = varMaChaineDeCarac.substring(0, varPosition); //On prend tout ce qui est avant
				}
				*/

				return varPosition; //On retourne le résultat				

			}

			function AjouterElement($IdElementSource,TextAAjouter,ValueAAjouter){

				MaListe = recupValeurElement($IdElementSource);

				var ElemAAjouter = document.createElement('option');
				ElemAAjouter.text = TextAAjouter;
				ElemAAjouter.value = ValueAAjouter;

				try {
					MaListe.add(ElemAAjouter, null); // standards compliant; doesn't work in IE
				}
				catch(ex) {
					MaListe.add(ElemAAjouter); // IE only
				}

			}
			
			//Tableau avec les valeurs qui vont peupler la Combobox
			TabReferences=new Array();
			TabReferences['value']=new Array();
			TabReferences['text']=new Array();
			TabReferences['value'][1] = 225212;
			TabReferences['text'][1] = "Boite de saucisses";
			TabReferences['value'][2] = 224527;
			TabReferences['text'][2] = "Tondeuse";
			TabReferences['value'][3] = 422278;
			TabReferences['text'][3] = "Arrosoir";
			TabReferences['value'][4] = 586234;
			TabReferences['text'][4] = "Balancier";
			TabReferences['value'][5] = 996514;
			TabReferences['text'][5] = "Poule";

			//On met les valeurs du tableau dans la combobox
			for (var Compteur in TabReferences['value'])
			{
				AjouterElement('Liste01',TabReferences['text'][Compteur],TabReferences['value'][Compteur]);
			}
			
		</SCRIPT>

	</BODY>
</HTML>
Lien vers le fichier : cliquez ici Copier le code

Article(s) suivant(s)

Combobox filtrée dynamiquement avec pour source une requête SQL

Article(s) précédent(s)

Remplir une combobox à partir d un tableau

Copier une combobox dans un tableau

2