MooSearch – Un buscador interno para tu Web

De manera muy simple lo que realiza este plugin, es asignar un evento al campo de texto que al escribir un término de mas de dos letras realiza una llamada al script que procesa la búsqueda (un php, asp…), utilizando ajax, y muestra el resultado de este script en un panel desplegable.

Este plugin, consta de tres partes, el código javascript, el CSS y el HTML. En este artículo explicaremos un poco los elementos HTML utilizados para que tú puedas personalizar e incrustar el buscador en tu página.

Código HTML: 

<div id="moo-search">
            <form action="" method="post">
                <div id="moo-key_words_left"><div id="moo-key_words_right">
                    <input type="text" id="moo-key_words" name="key_words" value="Buscar..." onfocus="this.value=''" autocomplete="off"/>
                    <div id="moo-action_search"></div>
                </div></div>
            </form>
            <div style="clear:left"></div>
            <div id="moo-results_search"></div>
</div>

moo-search es el contenedor del campo de texto y de todos los divs que utiliza.

moo-key_words_left y moo-key_words_right son las divs que personalizan la apariencia del campo de texto con una imagen fragmentada de fondo.

moo-key_words es el campo de texto, que asignaremos como oculto para que no interfiera en nuestro diseño.

moo-action_search es una div que se actualiza para mostrar en que parte del proceso de búsqueda estamos. Es decir, si no se escribe nada, esta permanece invisible, cuando se esta procesando la búsqueda muestra un spinner (cargando…), si la búsqueda falla, muestra un error y si la búsqueda finaliza, muestra un botón para cerrar. En nuestro caso, utilizamos diferentes imágenes de 12x12 para codificar estos comportamientos.

moo-results_search es el contenedor donde se mostraran los resultados de la búsqueda.

Por ultimo, esta div:

 <div style="clear:left"></div>

Solo sirve para evitar que se nos desmorone el diseño de nuestra página.

Una vez explicados el código HTML, ya puedes personalizar tu buscador, si quieres puedes descargarte el ejemplo y a partir de el código HTML y CSS que incluye, puedes personalizar tu campo de texto para la búsqueda.

Sobre el procesamiento de la búsqueda, tenemos dos artículos en los que explicamos como realizar búsquedas en nuestras páginas con php.

Búsquedas de coincidencias con php y MySQL

Buscador sin MySQL utilizando php

Puedes ver como funciona en este ejemplo a utilizando el motor de búsqueda del indice de pogramacionsitiosweb.com