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:
<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:
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:
Tweet
:)
grasias,,yo buscaba el de numeros pero grasias... xD
De nada, gracias por comentar.
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?
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.
Gracias hermano, ya pude resolver el problema, se le agradece muchisimo la ayuda. Espero poder contar con ustedes si los necesito despues
De nada. Puedes plantear cualquier duda que tengas e intentaré ayudarte. ¡Saludos!.
Publicar un comentario