Buscar en la lista

04/Feb/2008 JavaScript , , , 8 Comentarios

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

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. <input type="text" id="busca" name="busca" onKeyUp="buscar();">

Vídeos sobre Javascript


8 comentarios en “Buscar en la lista”

Víctor Cuervo

Jehu

Hola he implementado este sript y corre a la perfeccion, ahora si no es molestia quisiera saber como implementar este buscador, pero en vez que lo busque de una lista establecida (array), lo busque de una base de datos, lo he estado tratando de hacer pero no he podido cargarla (no busco cargar toda la BD, solo un campo) uso PHP y MySQL

me ayudan?

Víctor Cuervo

David

Hola. Me gustaría saber cómo poder localizar cualquier contenido de mi página incluyendo imágenes(campo search). Muchas gracias

Víctor Cuervo

Rocio

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

Víctor Cuervo

Rocio

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

Víctor Cuervo

Topikito

Muchas gracias

Víctor Cuervo

lineadecodigo

@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.

Víctor Cuervo

Topikito

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.

Víctor Cuervo

Topikito

Muchas gracias! Estaba buscándolo!

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*