La idea de este ejemplo es realizar una búsqueda sobre un listado de datos (presente en una lista de un formulario) partiendo de una entrada que va el usuario tecleando paulatinamente. Por ejemplo si partimos del siguiente listado de deportes
'Atletismo ', 'Aerobic', 'Balonmano', 'Beisbol', 'Badminton', 'Baloncesto', 'Footing', 'Fútbol', 'Gimnasia', 'Voleibol'
Si el usuario teclea una A o a debería de filtrar por todos aquellos deportes que empiecen por dicha letra, quedándonos…
'Atletismo ','Aerobic'
si posteriormente el usuario teclea una E o e, se filtraría por aquellos deportes que empezasen por AE, quedándonos…
'Aerobic'
Por un lado, en la parte gráfica, utilizaremos un simple formulario HTML con un campo input y una lista select.
Por otro, los datos, van a ir en la lista los almacenaremos en un array, para su fácil manejo:
lista = new Array('Atletismo ', 'Aerobic', 'Balonmano', 'Beisbol', 'Badminton', 'Baloncesto', 'Footing', 'Fútbol', 'Gimnasia', 'Voleibol');
Para cargar los datos del array en el combo del formulario utilizaremos el evento onLoad de arranque de la página, el cual recorrerá el array creando objetos del tipo OPTION que son válidos para ser introducidos en la lista del formulario.
El onLoad:
Y la carga del combo vía Javascript:
function cargarLista() {
// Cargamos el combo
for (x=0;x < lista.length;x++)
document.formulario.miCombo[x] = new Option(lista[x]);
}
La verdadera "chicha" del ejemplo está en realizar el filtrado de datos. Para ello nos valdremos de las expresiones regulares que me permiten buscar cadenas que empiecen por un conjunto de letras.
En este caso el conjunto de letras que componen la cadena a buscar es el texto introducido en el formulario:
texto = document.getElementById("busca").value;
expr = new RegExp("^" + texto,"i");
En este caso estamos buscando expresiones regulares que empiecen por las letras de la cadena a buscar. Para indicar el principio de una cadena en una expresión regular nos servimos el carácter ^.
Una vez que he conformado la expresión regular deberé de recorrer el array en busca de las opciones que cumplan dicho criterio. Para validar la expresión regular utilizaremos su método test. Aquellas opciones que sean válidas serán introducidas previamente en el combo (partiendo de la premisa de que en cada búsqueda limpiamos por completo los datos del combo).
y = 0;
for (x=0;x < lista.length;x++) {
if (expr.test(lista[x])) {
document.formulario.miCombo[y] = new Option(lista[x]);
y++;
}
}
Todo este proceso será lanzado cada vez que el usuario pulse una tecla, evento que detectamos con onKeyUp sobre el campo input del formulario.
