Añade jQuery Autocomplete a la búsqueda de tu sitio

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La función get_search_form() puede (y debería) usarse para mostrar el formulario de búsqueda en tu sitio. Hace su función, pero es muy anodino. Fué introducido en el lanzamiento de la versión 3.3 de WordPress, sin embargo, es una herramienta que puede hacer que su uso sea más fácil. En este tutorial te mostraré cómo puedes añadir jQuery Autocomplete a tu formulario de búsqueda.

Abre tu formulario de búsqueda

Este tutorial asume que tu tema usa get_search_form() para mostrar tu formulario de búsqueda e invoca wp_footer().

Echemos primero un vistazo al formulario de búsqueda de TwentyEleven (searchform.php en tu tema). Es muy probable que el tuyo sea muy similar. Si no puedes encontrar searchform.php en tu tema, entonces es posible que esté usando el código de marcado predeterminado que casi idéntico. Si tu formularo de búsqueda está codificado en bruto te recomiendo que lo coloques en searchform.php, y que uses get_search_form(); para mostrarlo.

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label for="s"><?php _e( 'Search', 'twentyeleven' ); ?></label>
	<input type="text" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
	<input type="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'twentyeleven' ); ?>" />
</form>

Lo que estamos buscando es el atributo ID del campo de entrada de búsqueda, de manera que podamos dirigirnos a él con jQuery. En este caso es 's'.

Antes de que empecemos, hagamos un poco de trabajo de fondo. Esto también servirá como resumen de lo que deberíamos estar haciendo.

Paso 1 Trabajo de fondo

Todo lo siguiente debería ir en el archivo functions.php de tu tema. Vamos a enganchar en el gancho 'init' con una función que hará lo siguiente:

Registrar algo de CSS y JavaScript – Vamos a necesitar algo del estilo de UI de jQuery. Solo voy a usar los estilos básicos, pero siempre puedes modificar tu propio tema para que se adecúe tu sitio. Puedes añadirlo al archivo style.css de tu tema o mantenerlo en un archivo independiente y registrarlo tal y como lo mostramos aquí. Vamos a necesitar también algo de JavaScript, al cual yo denominaré myacsearch.js y que guardaré en la carpeta js de mi tema.
Enganchar nuestro JavaScript y CSS – Queremos añadir nuestros estilos y javascript cuando (y solo cuando) el formulario de búsqueda se muestre. El filtro get_search_form se desencadena siempre que esto ocurre, y usaremos esto para encolar nuestros scripts y estilos.
Ajax actions – Necesitamos añadir una función de devolución de llamada para procesar la solicitud y devolver los resultados cuando WordPress reciba nuestra acción vía AJAX. Para hacer esto usamos los ganchos, wp_ajax_{action} y wp_ajax_nopriv_{action} en donde {action} se usa como un identificador para la acción que queremos realizar (y por tanto, debería ser única). Lo estableceré como myprefix_autocompletesearch.

add_action( 'init', 'myprefix_autocomplete_init' );
function myprefix_autocomplete_init() {
	// Register our jQuery UI style and our custom javascript file
	wp_register_style('myprefix-jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');
	wp_register_script( 'my_acsearch', get_template_directory_uri() . '/js/myacsearch.js', array('jquery','jquery-ui-autocomplete'),null,true);

	// Function to fire whenever search form is displayed
	add_action( 'get_search_form', 'myprefix_autocomplete_search_form' );

	// Functions to deal with the AJAX request - one for logged in users, the other for non-logged in users.
	add_action( 'wp_ajax_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions' );
	add_action( 'wp_ajax_nopriv_myprefix_autocompletesearch', 'myprefix_autocomplete_suggestions' );
}

Paso 2 La URL AJAX

Usaremos AJAX para enviar la entrada del formulario de búsqueda y devolver las entradas coincidentes conforme el usuario teclee. Por lo tanto, tendremos que dar a Autocomplete la URL a la que enviar la solicitud. WordPress tiene una URL específica que se ocupa de las solicitudes AJAX, y esta es proporcionada por admin_url( 'admin-ajax.php'). Esto nos da la URL en el lado del servidor, pero la queremos en nuestro archivo javascript. Esto se puede conseguise usando wp_localize_script. Esta función fue originalmente destinada a ayudar con la localización, pero podemos reutilizarla para nuestro propósito. Coloca esto inmediatamente después de registrar el javascript personalizado my_acsearch del paso 1:

1	wp_localize_script( 'my_acsearch', 'MyAcSearch', array('url' => admin_url( 'admin-ajax.php' )));

Esto define un objeto MyAcSearch que tiene una propiedad 'url'. Este método te permite enviar la configuración almacenada en la base de datos al archivo javascript, pero para nuestros propósitos solo necesitamos MyAcSearch.url que es la URL a la que dirigir nuestra solicitud AJAX.

Paso 3 El JavaScript

El autocompletar de jQuery viene con alguna funcionalidad embalada en él, pero nos vamos a atener a lo básico. Puedes ver todas sus características en la página de demostración. Los datos que enviamos a la URL AJAX incluirán una variable de acción cuyo valor es el identificador de acción que establecimos en el paso 1. En nuestro caso es myprefix_autocompletesearch. Por lo tanto, ahora en nuestro archivo javascript, añade lo siguiente.

1	var acs_action = 'myprefix_autocompletesearch';

Esto nos permite identificar la solicitud, realizar la búsqueda y devolver los resultados. A continuación aplicamos la función Autocomplete al formulario de búsqueda (aquí usamos el atributo ID de la entrada del formulario):

$("#s").autocomplete({
	source: function(req, response){
		$.getJSON(MyAcSearch.url+'?callback=?&action='+acs_action, req, response);
	},
	select: function(event, ui) {
		window.location.href=ui.item.link;
	},
	minLength: 3,
});

La función de origen debe devolver una matriz de objetos. Cada objeto debe tener la propiedad 'label' (para mostrar en la lista de sugerencias) y añadiremos la propiedad 'link', la dirección URL de la entrada. La función select se activa cuando un usuario hace clic sobre una de las sugerencias. En este ejemplo, al hacer clic en la sugerencia será llevado a esa página. minLength indica el número de caracteres que el usuario debe escribir antes de que se inicie el autocompletar.

Vamos a envolver todo esto en un controlador .ready, por lo que solo se ejecuta cuando la página se haya cargado completamente. De manera que el javascript completo es:

jQuery(document).ready(function ($){
	var acs_action = 'myprefix_autocompletesearch';
	$("#s").autocomplete({
		source: function(req, response){
			$.getJSON(MyAcSearch.url+'?callback=?&action='+acs_action, req, response);
		},
		select: function(event, ui) {
			window.location.href=ui.item.link;
		},
		minLength: 3,
	});
});

Paso 4 Encolar nuestros scripts y estilos

Cada vez que se muestra el formulario de búsqueda mediante la función get_search_form();, nuestra función myprefix_autocomplete_search_form se disparará. En esta función encolamos los scripts y los estilos que necesitamos para Autocomplete. No necesitamos cargar jQuery o Autocomplete directamente, WordPress ya sabe que lo necesitamos y lo gestionará por nosotros.

1	function myprefix_autocomplete_search_form(){
2	wp_enqueue_script( 'my_acsearch' );
3	wp_enqueue_style( 'myprefix-jquery-ui' );
4	}

Todo lo que queda por hacer es manejar la solicitud AJAX.

Paso 5 Gestionar la solicitud AJAX

Recuerda que en nuestra función myprefix_autocomplete_init invocamos algo como lo siguiente:

1	add_action( 'wp_ajax_{action}', 'my_hooked_function' );
2	add_action( 'wp_ajax_nopriv_{action}', 'my_hooked_function' );

La primera acción se desencadena cuando WordPress reciba una solicitud AJAX con una acción proporcionada por {action} y el usuario haya iniciado sesión. La segunda se activa cuando el usuario no haya iniciado sesión. Esto puede ser especialmente útil si solo deseas procesar una solicitud AJAX si el usuario ha iniciado sesión. Para nuestros propósitos queremos que funcione tanto para los usuarios que hayan iniciado sesión como para los que no lo hayan hecho, por lo que enganchamos nuestra función a ambas. Aquí definimos esa función de devolución de llamada, de nuevo esto va en tu archivo funciones.php:

function myprefix_autocomplete_suggestions(){
	// Query for suggestions
	$posts = get_posts( array(
		's' =>$_REQUEST['term'],
	) );

	// Initialise suggestions array
	$suggestions=array();

	global $post;
	foreach ($posts as $post): setup_postdata($post);
		// Initialise suggestion array
		$suggestion = array();
		$suggestion['label'] = esc_html($post->post_title);
		$suggestion['link'] = get_permalink();

		// Add suggestion to suggestions array
		$suggestions[]= $suggestion;
	endforeach;

	// JSON encode and echo
	$response = $_GET["callback"] . "(" . json_encode($suggestions) . ")";
	echo $response;

	// Don't forget to exit!
	exit;
}

Veamos esto paso a paso. La entrada que el usuario ha escrito se envía junto con la solicitud AJAX y es proporcionada por $_REQUEST['term']. Simplemente usamos el atributo de búsqueda get_posts para buscar ese término en nuestras entradas.

A continuación, pasamos por cada uno de las entradas devueltas, y para cada una construimos una matriz de sugerencia. Esa matriz contiene el título de la entrada (que denominamos 'label' para que Autocomplete la reconozca y la use para la lista de sugerencias) y el permalink de la entrada, de modo que al hacer clic en una el usuario sea dirigido a dicha página. Añadimos cada matriz de sugerencia a una matriz de sugerencias.

A continuación, codificamos las sugerencias y hacemos eco del resultado. ¡Finalmente, salimos! ¡Y ya hemos terminado!

Cuéntanos qué piensas a través de un comentario, y si tienes alguna sugerencia sobre cómo extender esto, también nos encantaría que lo compartas con nosotros.