¡Muy buenas a todos! Este será mi primer tutorial en Web.Ontuts, una primera contribución de una larga lista que espero ir publicando en las próximas semanas. En este primer tutorial aprenderemos a darle un poco más de interactividad a nuestras cajas de búsqueda: resaltado de caja de búsqueda al recibir el foco, auto-foco al cargar la página y aparición / desaparición del texto por defecto. Todo ello lo haremos mediante javascript, concretamente mediante mi librería preferida, utilizaremos jQuery…

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.
Descarga Demostración

Introducción: ¿Qué vamos a hacer?

Como comentábamos en el extracto inicial de la entrada, vamos a ver pequeñas técnicas que nos ayudarán a mejorar la experiencia del usuario al usar nuestras cajas de búsqueda. Concretamente trataremos los siguientes efectos:

  • Auto-foco al cargar la página
  • Resaltado de la caja cuando recibe el foco
  • Mostrado / ocultado del texto por defecto

Si bien estos efectos son pequeños y a priori simples, nos ayudarán a mejorar considerablemente la experiencia del usuario y a hacer un poco más agradable el uso de la caja de búsqueda. Recordad que para ello usaremos javascript, concretamente nos valdremos de las bondades y facilidades que nos proporciona mi librería javascript preferida: jQuery Library, desarrollada inicialmente (y actualmente liderada) por John Resig.

Creo que es hora de dejar de hablar… ¡vamos a ello!

Paso 1: La estructura

La estructura del documento HTML que nos permitirá trabajar en los distintos ejemplos no será compleja, mejor nos centraremos en lo importante, que es la parte del javascript. Esta será la estructura de todo el documento que usaremos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Mejorando las cajas de búsqueda mediante jQuery | Web.Ontuts</title>
	<link rel="stylesheet" href="main.css" type="text/css" media="screen" />
</head>
<body>
	<div class="wrapper">
		<div class="section">
			<h1>Ejemplo con auto-foco al cargar la página + resaltado</h1>
			<input id="search1" type="text" class="text" value="Buscar en la web..." />
		</div>
		<div class="section">
			<h1>Ejemplo de resaltado + ocultado / mostrado texto por defecto</h1>
			<input id="search2" type="text" class="text" value="Buscar en la web..." />
		</div>
	</div>
	<script type="text/javascript" src="jquery.js"></script> 
	<script type="text/javascript" src="main.js"></script>
</body>
</html>

Como vemos, es un simple documento xHTML con un par de inputsdel tipo text, los cuales están nombrados por sus id: searchbox1 y searchbox2, esto nos facilitará la selección en jQuery para aplicar los efectos deseados. ¡Vamos a darle un poco de estilo a todo esto!

Paso 2: Añadiendo estilo con CSS

Este es mi primer tutorial, pero a lo largo de todos los tutoriales que vaya publicando, comprobaréis que siempre que tengo que usar algún tipo de documento CSS utilizo lo que se conoce como CSS Reset, que no es más que una declaración inicial de todos (o casi todos) los atributos HTML al inicio del documento CSS que “tiende a cero o nulo”.

De esta forma, la mayoría de propiedades CSS no tienen ningún efecto hasta que nosotros mismos le demos posteriormente y de forma manual un valor. Esto es especialmente útil para facilitarnos la vida a la hora de maquetar para distintos navegadores a la vez, sobretodo para el Internet Explorer 6 y 7, que siempre da más problemas que el resto.

El CSS Reset nos permite reiniciar la mayoría de propiedades CSS para facilitar la compatibilidad de toda nuestra maquetación entre los distintos navegadores, ahorrándonos tiempo y quebraderos de cabeza.

Esta sería nuestra hoja de estilos:

@CHARSET "UTF-8";
/*
Author: Adrian Mato
Author URI: http://www.yensdesign.com & http://web.ontuts.com
*/

/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
	line-height: 1em;
	font-size: 12px;
	background: #262626 url(img/bg.png) repeat scroll 0 0;
	font-family: Myriad Pro, Arial, Helvetica, sans-serif;
	margin: 0pt;
	cursor: default;
}
table{
	border-collapse: separate;
	border-spacing: 0pt;
}
strong{
	font-weight: 700;
}
caption, th, td{
	font-weight:normal;
	text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after{
	content:"";
}
blockquote, q{
	quotes:"" "";
}
pre{
	font-family: Arial, Helvetica, sans-serif;
}
input{
	border: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}
textarea{
	font-family: Arial, Helvetica, sans-serif;
	color: #888888;
	padding: 7px 3px 0 4px;
	font-size: 11px;
}
select{
	font-size: 11px;
	color: #888888;
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #CAD2CE;
}
ul{
	list-style: none;
	list-style-type: none;
	list-style-position: outside;
}
a{
	cursor: pointer;
	color: #296ba5;
	text-decoration: none;
	outline: none !Important;
}
html,body{
	height:100%;
}
.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
	line-height: 0;
}
.clearfix{
	overflow: hidden;
}
.fleft{
	float: left;
}
.fright{
	float: right;
}
.italic{
	font-style: italic;
}
/******* /GENERAL RESET *******/

/******* CONTENT *******/
.wrapper{
	width: 800px;
	margin: 0pt auto;
	padding-top: 50px;
}
h1{
	color: #fff;
	font-size: 18px;
	line-height: 3em;
}
.section{
	margin-bottom: 25px;
}
input.text{
	width: 90%;
	background: #171717 url(img/search.png) no-repeat scroll right 2px;
	padding: 13px;
	color: #8c8c8c;
	border: 1px solid #393939;
	margin-bottom: 30px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	font-size: 16px;
}
input.text.active{
	background: #343434 url(img/search.png) no-repeat scroll right -43px;
	border-color: #000;
	color: #fff;
}
/******* /CONTENT *******/

Como véis, no hay nada especial, simplemente estamos aplicándole un poco de estilo y vistosidad a nuestra demostración. Quizás podríamos destacar el uso de una única imagen de fondo para los dos tipos de estado de la caja de búsqueda: normal o activa, haciendo uso de la técnica conocida como CSS Sprites (se altera la propiedad background-position).

La técnica empleada para la imagen de fondo de las cajas de búsqueda “CSS Sprites” nos permite utilizar una misma imagen para dos estados / apariencias distintas. Además, no existe retardo en la carga de la imagen de fondo al cambiar de apariencia, ya que se carga previamente.

Y ahora viene lo divertido e interesante… ¡vamos a por la parte de Javascript!

Paso 3: Añadiendo un poco de magia con jQuery

Ya casi estamos terminando… ¡hemos dejado la mejor parte para el final!, vamos a comenzar a explicar los 3 tipos de efectos que comentábamos al principio del tutorial:

  • Autofoco: Pondremos el foco activo en una de las cajas de búsqueda nada más cargar la web, como hace Google en su buscador.
  • Resaltado: Cambiaremos el aspecto de la caja de búsqueda que esté activa y usándose en ese momento, para facilitar su visualización al usuario.
  • Mostrado / Ocultado de texto: Queremos facilitar la experiencia al usuario, por tanto haremos que nuestro texto por defecto de la caja de búsqueda desaparezca / aparezca según sea necesario.

Todo el código que viene a continuación iría en un único documento javascript, el cual hemos nombrado “main.js“. Comencemos el juego pues…

Guardando las referencias de los elementos

Si bien los selectores de jQuery nos permiten recuperar las referencias de los elementos en el DOM con relativa facilidad, la razón por la que guardaremos en variables javascript las referencias de los elementos a usar, es por temas de optimización. En este ejemplo apenas importaría, pero sí que lo podemos considerar una buena práctica.

Guardando en variables javascript las referencias a los elementos proporcionados por los selectores de jQuery estaremos reduciendo y optimizando el trabajo de selección, así, en próximas ocasiones, tendrá ya la referencia guardada y no tendrá que recorrer de nuevo todo el documento.

Estas serían las primeras líneas de nuestro código Javascript:

//variables globales
var searchBoxes = $(".text");
var searchBox1 = $("#search1");
var searchBox2 = $("#search2");
var defaultText = "Buscar en la web...";

Gestionando los eventos focus y blur

Al igual que para la selección de elementos, jQuery nos permite gestionar de forma rápida y fácil los eventos asignados a los distintos elementos del DOM. A nosotros nos interesará controlar el foco y la pérdida de foco: focus y blur respectivamente:

//efectos en el evento focus (foto) para ambas cajas de busqueda
searchBoxes.focus(function(){
	$(this).addClass("active");
});
searchBoxes.blur(function(){
	$(this).removeClass("active");  
});

Como véis estamos añadiendo / quitando según necesitemos a las cajas de búsqueda la clase active, variando así su estética para que el usuario final reconozca facilmente qué caja está activa.

Activando el autofoco

Mediante la llamada de la función focus() haremos un autofoco en la primera de las cajas de búsqueda, simulando el mismo efecto que hace Google cuando entramos en su buscador:

//Activamos y auto activamos el foco en la primera caja de busqueda #search1, cuando el documento esta listo
searchBox1.focus();

Una vez más vemos como todo es mucho más simple de lo que puede parecer a priori.

Mostrando / Ocultando el texto por defecto

Y para terminar, vamos a facilitar un poco más al usuario final el uso de nuestra caja de búsqueda… haremos que si pincha en ella y esta recibe el foco, se vaya el texto por defecto y que si salimos de la caja, vuelva a aparecer. Recordad que esto sólo ocurrirá si el texto es el original, el texto por defecto, no para textos distintos introducidos por nosotros:

//Mostramos / ocultamos el texto por defecto si es necesario
searchBox2.focus(function(){
	if($(this).attr("value") == defaultText) $(this).attr("value", "");
});
searchBox2.blur(function(){
	if($(this).attr("value") == "") $(this).attr("value", defaultText);
});

¡Y ya hemos terminado con nuestras cajas de búsqueda!

Reflexión final

Como habréis podido comprobar a lo largo de este tutorial, jQuery es una librería que nos facilita realmente toda nuestra labor con el javascript, a la vez que nos asegura un uso óptimo de los selectores, efectos (que en esta ocasión no hemos visto), compatibilidad con la mayoría de navegadores y un sin fín de ventajas que iremos viendo a lo largo de otros tutoriales.

Espero que os haya gustado este primer tutorial y… ¡nos vemos en el próximo!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (17 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Derleth

me ha gustado mucho mucho mucho el tutorial :)
gracias ^^

VG

Muy buena la guía.
Tengo una pregunta, ¿Cómo se la lleva JQuery con Spring?. Me han dicho que es muy bueno y fácil de usar JQuery y estuve buscando pero no consigo mucha información, de hecho llegué a leer que es un fastidio trabajarlo con este Framework. ¿Es cierto? Yo por mi parte no sabía ni como comenzar… Saludos

@VG No he trabajado con Spring pero jQuery al igual que otras librerías / frameworks javascript son para el tratamiento de los objetos HTML por lo que no deberías tener problemas.

Jack

COMO HAGO QUE FUNCIONE EN MI WEB, puesto solo sirve para ver y no busca

Gracias

@Jack El tutorial sólo habla de mejorar la funcionalidad de las cajas de búsqueda, no de cómo crear tu propio sistema de búsqueda!

ho chi minh tolsa
marco m

Seguí tu ejemplo con la diferencia que coloqué:

dentro del head, lo ejecutaba y no salía.Me di cuenta y lo puse al final del body como hiciste.
Pero ¿Cuál es la diferencia, no se recomienda que debe ir dentro del head?

marco m

… coloqué:
las referencias a los scripts …

Mr. Raymon

Un tutorial muy interesante y util.

Aunque tiene un problema y es relacionado con el tema de las tildes. Intente poner correctamente la tilde de esta forma (supuestamente mas correctamente para la visualizacion en todos los navegadores), í seria el equivalente a la “í”. Sin embargo no llega a “desaparecer” el texto cuando pulsas en la caja.

¿Alguna solución al problema?

Saludos y Gracias por este tutorial.

@Mr.Raymon estás trabajando con la codificación correcta (te recomeindo UTF-8) en todos tus archivos? Ese puede ser uno de los causantes.. en cualquier caso revisa que la comparación literal es la misma en ambas cadenas, y no que en una tengas tilde y en otra &ntilde.

Leo Lamela

Hola Adrián, perdona que te moleste, ¿Puedo hacerte una preguntita sobre el problema que tengo en Jquery aunque no tenga que ver con este tutorial? Te explico: tengo una tabla con respuestas de un examen y le he puesto dos botones bien y mal, y lo que no me sale es que cuando pulses sobre el boton bien se borre el boton mal y viceversa.

$(“a.boton_bien”).bind(“click”,function()
{
$tabla=$(this).parent().find(‘fidescu_table2′);

if(!$tabla.hasClass(‘boton_bien’))
{
$(this).html($(‘a.boton_mal’).hide());
$(this).html(‘Bien’).show();
}
$tabla.toggleClass(‘hide’);
});
Así tengo programado los dos botones, pero de esta forma se borran todos los mal de la tabla si pulsas en bien y al reves¿Cómo puedo controlar para que pulse el boton de la linea de la tabla?
Muchisimas gracias y perdona

Jes

muy bueno, me ha sido muy util!!! estyo comenzando a utilizar las herramientas y fue muy sencillo cómo lo explicaste, gracias!!

Carlos Luque

Muchas gracias. Muy utiles los codigos que ofreces en esta pagina. De esta generosidad esta necesitando mucho este mundo loco.

Por otra parte quisiera pedirle una ayuda.

Desde una caja de texto voy filtrando en tiempo real – caracter a caracter y me funciona sin problemas cuando la consulta que invoco desde ese input es sobre un campo numerico.

Si en cambio, desde esa mismo input invoco a una consulta sobre un campo de texto, no me realiza el filtrado en tiempo real, pero si cuando termino con RETURN. esto me indica que no hay problemas en la consulta. Cual puede ser la causa?

Gracias.

GElideth

Excelentísimo ツ Bendiciones de lo alto y que Dios le siga dando sabiduría y de su gracia para compartir sus conocimientos

Hola a todos! …en dreamsite.es estamos buscando PROGRAMADORES PHP y MAQUETADORES HTML/CSS/JQUERY.

Si os interesa en trabajo mandar vuestro CV a empleo@dreamsite.es

por cierto, muy buen código ;)