jump to navigation

Buscar en la lista Febrero 4, 2008

Publicado por lineadecodigo en : JavaScript , trackback

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.

  1.  
  2. <form id="formulario" name="formulario">
  3.   label"><label for="busca">Buscar:</label>
  4. <input type="text" id="busca" name="busca" onKeyUp="buscar();">
  5.   <br/>
  6.   label"><label for="miCombo">Listado:</label>
  7. <select id="miCombo" name="miCombo" size=8></select>
  8. </form>
  9.  

Por otro, los datos, van a ir en la lista los almacenaremos en un array, para su fácil manejo:

  1. 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:

  1. <html onLoad="cargarLista();">

Y la carga del combo vía Javascript:

  1. function cargarLista() {
  2.   // Cargamos el combo
  3.   for (x=0;x < lista.length;x++)
  4.    document.formulario.miCombo[x] = new Option(lista[x]);
  5. }

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:

  1. texto = document.getElementById("busca").value;
  2. 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).

  1. y = 0;
  2.  
  3.    for (x=0;x < lista.length;x++) {
  4.      if (expr.test(lista[x])) {
  5.       document.formulario.miCombo[y] = new Option(lista[x]);
  6.        y++;
  7.      }
  8.    }

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

  1.  
  2. <input type="text" id="busca" name="busca" onKeyUp="buscar();">

Visualizar el ejemplo | Descargar el código

Articulos Similares:

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 7296 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Tags:, , , , , , , ,

Comentarios»

1. Topikito - Julio 10, 2009

Muchas gracias! Estaba buscándolo!

2. Topikito - Julio 10, 2009

mmm, una pregunta: ¿cómo hago si quiero que un elemento seleccionado pase a otro textbox ?

Mi idea es la siguiente: Tengo una lista con los artículos en venta, y para buscar uno para añadirlo al carrito, pues busco el elemento, y al hacer click en él, debería pasar a un textbox.

3. lineadecodigo - Julio 28, 2009

@Topikito,

En la lista

<select id=”miCombo” name=”miCombo” size=8></select>

Añades un evento onChange que obtenga el valor y lo pase a un textbox.

<select id=”miCombo” name=”miCombo” onChange=”document.getElementById(‘texto’).value=this.value;”>

En nuestro caso, el textfield se llama texto… :-)

Espero que te sea de ayuda.

4. Topikito - Julio 30, 2009

Muchas gracias

5. Rocio - Agosto 16, 2010

el onLoad=”cargarLista();” debe ir en el

6. Rocio - Agosto 16, 2010

l onLoad=”cargarLista();” debe ir en el tag del body


Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen