jueves, 21 de mayo de 2009

Filtrado de Lista Desplegable en JavaScript

Cuando tenemos una lista desplegable con muchas entradas se hace lenta la selección. Vamos dar una solución que sea más usable, para ello vamos a filtrar dichas entradas. Se van a mostrar dos ejemplos, uno en el que se filtra por la subcadena inicial y otro en el que se filtra por cualquier subcadena.




Filtrado por la subcadena inicial


Partiendo de los siguientes controles y su respectivo código:


lista desplegable






<html>
<head>
<script language="JavaScript">
var i;
function addOpt(oCntrl, sTxt, sVal, sCnd){
if (sTxt.substr(0, sCnd.length).toUpperCase() == sCnd.toUpperCase()){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[i++]=selOpcion);
}
}
function cambia(oCntrl){
var txtVal = document.frm.txt.value;
while(oCntrl.length > 0) oCntrl.options[0]=null;
i = 0;
oCntrl.clear;
addOpt(oCntrl, "Ciudad de Mexico", "0", txtVal);
addOpt(oCntrl, "Ciudad de Panama", "0", txtVal);
addOpt(oCntrl, "Ciudad de Guatemala", "0", txtVal);
addOpt(oCntrl, "Caracas", "0", txtVal);
addOpt(oCntrl, "Cancun", "0", txtVal);
addOpt(oCntrl, "Maracay", "0", txtVal);
addOpt(oCntrl, "Maracaibo", "0", txtVal);
addOpt(oCntrl, "Zaragoza", "0", txtVal);
}
</script>
</head>
<body onload="cambia(document.frm.ciudad)">
<form name="frm">
<table border="0">
<tr>
<td>
Ciudad:
</td>
<td>
<input type="text" name="txt" onkeyup="cambia(document.frm.ciudad)">
</td>
<td>
<select name="ciudad">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>



Obtendremos un filtrado por la subcadena inicial:


lista desplegable filtrada 1






Filtrado por cualquier subcadena


Pero si queremos que nos filtre por cualquier subcadena, tendremos que modificar la función addOpt, quedando de la siguiente forma:




function addOpt(oCntrl, sTxt, sVal, sCnd){
if (sTxt.substr(sTxt.indexOf(sCnd), sCnd.length).toUpperCase() == sCnd.toUpperCase()){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[i++]=selOpcion);
}
}



Lo que hace ese código es buscar desde que aparece la cadena introducida hasta el final. El resultado sería éste:


lista desplegable filtrada 2




7 Comentarios:

Anónimo dijo...

:)

Anónimo dijo...

grasias,,yo buscaba el de numeros pero grasias... xD

Felipe Martínez D. dijo...

De nada, gracias por comentar.

Anónimo dijo...

Yo tengo un select con categorias obtenidas desde la base de datos y otros select con subcategorias tambien obtenida desde la base de datos. Las subcategorias son muchas lo que quiero es que al seleccionar una categoria en el select de las subcategorias solo se muestren las de la categoria seleccionada. o sea que el primer select me sirva como filtro me ayudan?

Felipe Martínez D. dijo...

Hola.

Por favor, muéstrame el código de tu aplicación e intentaré ayudarte (si es mucho código, envíamelo a mi correo).

Saludos cordiales.

Anónimo dijo...

Gracias hermano, ya pude resolver el problema, se le agradece muchisimo la ayuda. Espero poder contar con ustedes si los necesito despues

Felipe Martínez D. dijo...

De nada. Puedes plantear cualquier duda que tengas e intentaré ayudarte. ¡Saludos!.

Publicar un comentario

Felinfo: Java, Linux, Virtualización. Open Source.  ©Template Blogger Green by Dicas Blogger .

TOPO