Campo de búsqueda que crece automáticamente con jQuery

Seguramente alguna vez encontraron en alguna aplicación web los campos que se expanden cuando los seleccionamos con nuestro puntero del mouse, por lo general este tipo de características son muy utilizados en campos destinados para realizar búsquedas. Son muy prácticos porque no ocupan lugar en la interface a menos hasta llegado el momento de ser utilizados.

Implementar este tipo de campos que se expanden automáticamente es muy simple, y más aún si utilizamos el plugin desarrollado por Boxtuffs (Autogrow Search) que con apenas unas líneas de código y valiéndose del framework jQuery y bastante de CSS3 logra perfectamente el cometido.

Campo sin foco (izquierda) y con foco (derecha)

buscador expande

Si lo desean pueden probarlo directamente desde su navegador desde la demostración en línea.

Para ver el funcionamiento les recomiendo que descarguen el código desde la web oficial, el archivo donde van a encontrar donde ocurre la magia es effects.js. En el archivo comprimido también van a encontrar la biblioteca jQuery, los archivos CSS y finalmente el archivo con la tipografía utilizada en los botones.

Plugin: Autogrow Search

Categorizado en: