Implementar fácilmente un efecto de búsqueda en vivo

El efecto de búsqueda en vivo no es una novedad en las aplicaciones de escritorio. En Mac OS X o Windows Vista / 7, simplemente escriba algunas letras en un cuadro de búsqueda, casi instantáneamente obtendrá el resultado de la búsqueda sobre la marcha. Tener que presionar el botón enviar se está convirtiendo en la vieja escuela..

Este tutorial le mostrará cómo traer este efecto genial al mundo web con jQuery. El código utilizado en este tutorial se modifica según el enfoque de John Resig.

Efecto Livesearch en Windows 7

Efecto Livesearch en OS X

Caracteristicas

Presenta el resultado de búsqueda sobre la marcha
Búsqueda borrosa
Súper rápido, no hay llamadas AJAX

Paso 1: El HTML

Para empezar, necesitamos algunos elementos html que incluyen:

Una entrada de texto, En el que escribimos nuestras consultas..
Una lista desordenada, para mostrar el resultado de la búsqueda

… Y dos bibliotecas de javascript:

jQuery: Necesitará al menos saber esto para completar este tutorial.
Puntuación Quicksilver: Este maravilloso script imita el famoso algoritmo de búsqueda de vidas Quicksilver en Mac. Indica si dos cadenas de texto son relevantes y cuán relevantes. Es como un mini google en un archivo js. A todos los usuarios les gusta la búsqueda difusa, ¿verdad? Y a todos les gusta que los resultados de búsqueda se muestren de lo más relevante a lo menos. Gracias al gran trabajo de Lachie Cox.!

Por último, pero no menos importante, necesitamos algunos elementos para buscar. En este tutorial, usemos los nombres de muchos marcos web como datos ficticios, ¿de acuerdo? (Ver la lista de estos marcos)

Los datos de "búsqueda de" se pueden proporcionar en matrices, JSON o cualquier forma, siempre que se puedan recorrer en javascript. También se pueden utilizar matrices multidimensionales. Pero para facilitar la demostración y la comprensión, los datos utilizados en este tutorial son una simple matriz unidimensional llamada "elementos".

Y finalmente, aquí está el HTML. Preste atención a dónde se incluyen las dos bibliotecas JS. Nota: css no es la parte clave de este efecto, por lo que no gastaremos ningún segundo en el estilo. Están minificados. Espero que esto no te moleste ni te distraiga. Centrémonos en HTML y JS.

Guarde el siguiente código en un archivo html y comencemos!

     jQuery Livesearch Effect     Demostración de jQuery Livesearch
 Encuentra tu marco web favorito
  <-- Type in here and get search results LIVE!

Paso 2: Firebug es nuestro mejor amigo!

Como hombre de javascript, no puedes vivir sin Firebug hoy. Definitivamente es una necesidad para cualquiera que trabaje con jQuery. Puedes completar este tutorial sin tener instalado Firebug. Pero con Firebug, podemos ver muchas cosas detrás de la escena, lo cual es esencial para entender la búsqueda en este sentido..

¿Recuerdas los artículos ficticios para buscar? Sí, los nombres del marco. Vamos a ver si están en el lugar correcto con Firebug:

Abre el archivo HTML con Firefox.
Abra Firebug y cambie al panel "Consola" (ctrl + shift + c).
Escribe "elementos" (sin comillas) en el cuadro de la derecha y pulsa "Ejecutar".

Deberías ver algo que se muestra en la imagen de abajo. Firebug imprime la variable "elementos" que es una matriz. Sí, los nombres de nuestros marcos están ahí, en su lugar. Continúemos!

Paso 3: La lógica

Ahora, hablemos de la lógica. Para que este efecto funcione, una secuencia de cosas debe ocurrir:

El usuario pulsa una tecla.
Obtenemos el texto del cuadro de búsqueda. Llamemos a esto "consulta".
Para cada nombre de marco, verificamos si la consulta es relevante y cuán relevante es.
Filtramos los nombres de los marcos relevantes y los ordenamos según la relevancia.
Presentamos el resultado al usuario..

Fácil, ¿eh? Salvo por una cosa. Si busco un marco llamado "cake", la lógica anterior se ejecuta, un ciclo por letra, 4 ciclos en total, ¿verdad? Pero los primeros 3 ciclos son completamente innecesarios, solo para reducir el rendimiento de manera importante. Para mitigar esto, esperaremos hasta que el usuario deje de teclear antes de disparar nuestra lógica. Y si un usuario deja de teclear por 0,2 segundos, asumimos que termina. A este punto, nuestra lógica es suficientemente delicada. Es hora de ensuciarse las manos y comenzar a programar.!

Paso 4: Escucha de eventos

En la vida real, escuchar puede ser extremadamente importante. Esto también es cierto en el mundo de jQuery, donde todo comienza al escuchar un evento..

Busque "marcador de posición" en el archivo HTML. Pon el siguiente código en ese lugar.

El siguiente código escucha el evento keyup. Tíralos entre ele

Código