Aurélien STRIDE

Life & Works

Un bug bizarre entre jQuery et les combo

by webmaster

J’ai voulu mettre en place un système simple de filtrage de combo (liste déroulante) avec un champ texte associé.

Liste déroulante

J’applique une fonctio jQuery sur le onKeyUp de la zone associé à cette fonction :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
 
function filterCbo(name, val)
{
	$('select[name="'+name+'"] option').show();
	if(!val) 
	{
		return;
	}
	
	$('select[name="'+name+'"] option').each(function() {
		text=$(this).text();
		text=text.toLowerCase();
		if(text.indexOf(val)!=-1)
		{
			$(this).hide();
		}
	});
}

 

Autant le hide() sur les options fonctionne, autant la hauteur de la liste déroulante se réduit jusqu’à 0 au fur et à mesure du filtrage !!! Et au final, on ne peut rien sélectionner.

L’attribut size, que de nombreux forums publient come LA solution, transforme la liste déroulante en liste-tableau, et le hide() sur les options ne fonctionne plus.

Au final, je me suis rabattu sur l’emploi de l’attribut selected qui m’affiche le premier item correspondant au filtre.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 
function filterCbo(name, val)
{
	$('select[name="'+name+'"] option').removeAttr('selected').removeAttr('disabled');
	if(!val) 
	{
		// $('select[name="'+name+'"]').removeAttr('size');
		return;
	}
	
	$('select[name="'+name+'"] option').each(function() {
		text=$(this).text();
		text=text.toLowerCase();
		if(text.indexOf(val)!=-1)
		{
			$(this).attr('selected','selected');
			return;
		}
	});
	
	$('select[name="'+name+'"]').val($('select[name="'+name+'"] option[selected="selected"]:eq(0)').attr('value'));
}