Busqueda en lista

La idea de este ejemplo es realizar una busqueda 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, quedandonos...

'Atletismo ','Aerobic'

si posteriormente el usuario teclea una E o e, se filtraría por aquellos deportes que empezasen por AE, quedandonos...

'Aerobic'

En la parte gráfica utilizaremos un formulario con un campo input y una lista select.

<form id="formulario" name="formulario">
  Buscar:
  <input type="text" id="busca" name="busca" onKeyUp="buscar();">
  <br/>
  Listado: <select id="miCombo" name="miCombo" size=8></select>
</form>

Ademas, los datos que 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 utilizaremos el evento onLoad de arranque de la página, el cual recorrera el array creando objetos del tipo Option que son válidos para ser introducidos en la lista del formulario

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 empiezen por un conjunto de letras.

 expr = new RegExp("^" + texto,"i");

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 busqueda limpiamos por completo los datos del combo).

Todo este proceso será lanzado cada vez que el usuario pulse una tecla, evento que detectamos con onKeyUp sobre el campo input del formulario.

Código : BusquedaEnLista.htm

<html>
<head>
<title>Busqueda en lista</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="cargarLista();">
<form id="formulario" name="formulario">
  Buscar:
  <input type="text" id="busca" name="busca" onKeyUp="buscar();">
  <br/>
  Listado:
  <select id="miCombo" name="miCombo" size=8></select>
</form>
<script>
 // Defino el array con los datos
 lista = new Array('Atletismo ','Aerobic','Balonmano','Beisbol',
 'Badminton','Baloncesto','Footing','Fútbol','Gimnasia','Voleibol');
 function cargarLista() {
  // Cargamos el combo
  for (x=0;x<lista.length;x++)
    document.formulario.miCombo[x] = new Option(lista[x]);
 }

 function buscar() {
   limpiarLista();
   // Obtengo el valor del texto
   texto = document.formulario.busca.value;
   // Creo la expresión regular
   expr = new RegExp("^" + texto,"i");
   // Recorro la lista. Si la expresión regular es OK
   y = 0;
   for (x=0;x<lista.length;x++) {
     if (expr.test(lista[x])) {
      document.formulario.miCombo[y] = new Option(lista[x]);
       y++;
     }
   }
 }
 function limpiarLista() {
   for (x=document.formulario.miCombo.length;x>=0;x--)
     document.formulario.miCombo[x] = null; 
 }
</script>
</body>
</html>

Autor: alaumbra.com
http://www.aulambra.com/ver.asp?id=128

Usuarios que han visto este tema también han visto...

- Listas dinamicas enlazadas
- Creación de Objetos en JavaScript
- Autozoom de texto con Javascript
- Menu desplegable con enlace con Javascript
- El Objeto Image en JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento