Un buscador estilo Mac OS X en tu sitio o blog

El buscador de Macintosh es muy popular por su estilo sofisticado que aparece en OS X, Safari y demás aplicaciones del entorno Mac. Tiene el ícono de una lupa a la izquierda que nos despliega algunas opciones de búsqueda y a medida que vamos escribiendo dentro del campo input aparece un ícono para limpiar el campo.

WebCore es un framework que incluye un motor de renderizado de HTML a Mac OS X. Mediante él podemos acceder a campos de búsqueda estilo OS X en Safari, usando atributos HTML específicos. ¡Entérate cómo lograrlo!

Un buscador estilo Mac OS X

Mediante CSS y Javascript podemos dar algo de la elegancia de la Mac a un buscador en nuestro sitio:

<span class="sbox_l"></span>
<span class="sbox"><input type="search" id="srch_fld" ¬
	placeholder="Search..." autosave="bsn_srch" ¬
	results="5" /></span>
<span class="sbox_r" id="srch_clear"></span>

Al aplicar la hoja de estilos correspondientes obtenemos la apariencia deseada:

span.sbox_l  {
	background: white url('srch_l.gif') ¬
		no-repeat top left;
	float: left;
	width: 19px; height: 19px;
}

span.sbox_r  {
	background: white url('srch_r.gif') ¬
		no-repeat top left;
	float: left;
	width: 19px; height: 19px;
}

span.sbox input {
	background: white url('srch_bg.gif') ¬
		repeat-x top left;
	float: left;
	border: 0;
	height: 19px; width: 142px;
	padding: 3px;
	font: 11px/13px arial;
	color: #000;
}

Los dos <span> que rodean el campo de texto tienen tamaño e imágenes de fondo que otorgan esa forma “redondeada” típica de Mac. Los bordes del campo de texto son eliminados y en cambio se le otorga un fondo que se repite. Así debería verse en tu computadora:

Notemos que hay que separar el CSS en tres archivos externos, por ejemplo: default.css para los estilos estándares, dummy.css para un comentario y applesearch.css con el markuppara Safari.

Los dos primeros se enlazan desde el head:

<link rel="stylesheet" type="text/css" ¬
 href="default.css" name="default"  />
<link rel="stylesheet" type="text/css" ¬
	 href="dummy.css" id="dummy_css"  />

Y mediante JS externo:

<script type="text/javascript" src="applesearch.js" ¬
	/></script>

Para inicializar la casilla de búsqueda al cargar el documento, ponemos la siguiente línea de Javascript también en el head:

<script type="text/javascript">
//<![CDATA[
	window.onload = ¬
		function () { applesearch.init(); }
//]]>
</script>

La función init chequea el navegador del usuario y carga la hoja de estilos applesearch.css en caso de ser aplicable.

Si agregamos el siguiente manejador al campo input, el botón de borrar/limpiar aparece al ingresar texto dentro. Este es el código (applescript.js).

onkeyup="applesearch.onChange('srch_fld','srch_clear')"

Espero que te sea muy útil este buscador, haz clic aquí para ver un ejemplo online, o descarga un zip con los archivos utilizados en esta explicación.

Fuente: brandspankingnew.net