Sugerencias en las búsquedas al estilo Apple

Una de las implementaciones habituales de los frameworks de javascript es la de dotar a los formularios de búsqueda con sugerencias mientras el usuario va escribiendo el texto.
Esto nos permite ofrecer al usuario información extra que le puede resultar de interés y velocidad en su proceso de búsqueda.

El realizar esta implementación conlleva el uso de peticiones AJAX, por las que, sin necesidad de actualizar la página completamente, se refresca un determinado bloque con los resultados de una consulta a la base de datos.

En marcofolio.net tenemos un tutorial donde nos explican paso a paso, tanto el código javascript usado como los archivos PHP y estructura de la base de datos en MySQL necesarios, para realizar una implementación de este tipo basada en la apariencia de los buscadores de la página web de Apple.

Puedes acceder a la demostración online y descargar todo el código fuente necesario para revisar el ejemplo.

25 Tutoriales para desarrolladores y diseñadores web

25 Powerful and Useful jQuery Tutorials for Developers and Designers es un artículo de la gente de speckyboy que reúne 25 tutoriales de nivel medio/alto de jQuery especialmente pensados para desarrolladores y diseñadores web.

Entre ellos: validación de formularios, encuestas, precarga de imágenes, interacción con Google Maps, menús, pestañas…

Detectar el navegador web con jQuery

Gracias a jQuery podemos obtener información sobre el navegador web utilizado por el usuario para visitar la página. jQuery nos ofrece la información sobre el motor y versión, con lo que podremos adaptar nuestros desarrollos al navegador detectado.

La información la obtenemos gracias a las propiedades $.browser() y $.browser.version()

$.browser() contiene las variables de los navegadores más habituales (safari, opera, msie y mozilla) y su valor será true o false según convenga.

$.browser.version() nos devolverá una cadena de texto con la versión del navgeador.

Un ejemplo práctico de estas funcionalidades lo vemos en el siguiente ejemplo, donde se modifica el estilo de un elemento en base al navegador detectado:

//A. El navegador es Safari
if( $.browser.safari ) $(«#menu li a»).css(«padding», «1em 1.2em» );

//B. El navegador es Internet Explorer, pero con versión superior a la 6
if ($.browser.msie && $.browser.version > 6 ) $(«#menu li a»).css(«padding», «1em 1.8em» );

//C. El navegador es Internet Explorer, pero con versión inferior o igual a la 6
if ($.browser.msie && $.browser.version <= 6 ) $(«#menu li a»).css(«padding», «1em 1.8em» );

//D. El navegador es Mozilla Firefox en versión 2 o superior
if ($.browser.mozilla && $.browser.version >= «1.8» ) $(«#menu li a»).css(«padding», «1em 1.8em» );