Mejorando el formulario de búsqueda con typeahead.js

El formulario de búsqueda de WordPress no ofrece ninguna campana y silbidos de forma predeterminada. Si ya está incluido en su tema, o si ha agregado el widget de búsqueda a una de sus barras laterales, puede dar fe de ello. Una forma de mejorar en gran medida su funcionalidad es incluir un script de autocompletar para ayudar a mejorar la eficiencia de la forma en que se transmiten las consultas de búsqueda relevantes.

Twitter typeahead.js

Hay bastantes scripts de autocompletado disponibles y recientemente Jake Harding de Twitter lanzó typeahead.js, una versión completamente independiente de un script de nombre similar que viene con Bootstrap. Pensé que sería interesante descubrir cómo usar este script ligero con WordPress, y después de un poco de esfuerzo, logré armar un pequeño complemento con la ayuda de Michal Bluma.

Plugin WP Typeahead

El complemento es bastante sencillo ya que solo se necesita un poco de personalización para que las cosas funcionen correctamente. Voy a desglosar cada sección del código del complemento para que expliques lo que está pasando.

Configuración básica del plugin

 plugin_url = plugin_dir_url (__FILE__); add_action ('wp_enqueue_scripts', array ($ this, 'wp_enqueue_scripts')); add_action ('wp_ajax_nopriv_ajax_search', array ($ this, 'ajax_search')); add_action ('wp_ajax_ajax_search', array ($ this, 'ajax_search'));  $ bavotasan_wp_typeahead = new Bavotasan_WP_Typeahead;

Por sí solo, el código anterior solo escupirá algunos errores, pero este es el comienzo de todo lo que necesita para usar typeahead.js con el formulario de búsqueda de WordPress. La primera acción es poner en cola los archivos JavaScript / CSS que necesita y colocar el JS requerido en el pie de página. Luego vienen las llamadas de Ajax para ayudar con los resultados de búsqueda. Echemos un vistazo a cada función..

Encolado

 / ** * Enqueue Typeahead.js y la hoja de estilo * * @since 1.0.0 * / public function wp_enqueue_scripts () wp_enqueue_script ('wp_typeahead_js', $ this-> plugin_url. 'Js / typeahead.min.js', array ( 'jquery'), ", true); wp_enqueue_script ('wp_hogan_js', $ this-> plugin_url. 'js / hogan.min.js', array ('wp_typeahead_js'),", true); wp_enqueue_script ('typeahead_wp_plugin', $ this-> plugin_url. 'js / wp-typeahead.js', array ('wp_typeahead_js', '' wp_typeahead_pañales) 'admin-ajax.php')); wp_localize_script ('typeahead_wp_plugin', 'wp_typeahead', $ wp_typeahead_vars); wp_enqueue_style / css / typhead_css / typhead_css / typs_heads.

Hay cuatro archivos que deben ser puestos en cola. Primero es el actual typeahead.js archivo, entonces el motor de plantillas llamado hogan.js, seguido de un nuevo archivo JavaScript que crearemos para poner todo en movimiento, y finalmente la hoja de estilo que hace que todo se vea bien.

Notarás que en el medio también usamos wp_localize_script para que la URL de Ajax esté disponible para nuestro JavaScript.

El script de pie de página

 (function ($) $ ('input [name = "s"]') .typeahead (name: 'search', remote: wp_typeahead.ajaxurl + '? action = ajax_search & fn = get_ajax_search & terms =% QUERY', template: 'valor
',] .join ("), engine: Hogan) .keypress (function (e) if (13 == e.which) $ (this) .parents (' form ') .submit (); devolver falso ;);) (jQuery);

Pon esto en el nuevo /js/wp-typeahead.js expediente. El selector de jQuery anterior adjuntará la función typeahead a cualquiera de los formularios de búsqueda de WordPress predeterminados y usará el motor de plantillas de Hogan para formatear los datos Ajax devueltos. A veces, el formulario de búsqueda puede ser modificado por su tema y el botón de envío se eliminará, por lo que agregué una pequeña secuencia de comandos para asegurarse de que cuando presiona el botón de ingreso, el formulario de búsqueda se envíe realmente..

La consulta de Ajax

 / ** * Ajax consulta para la búsqueda * * @since 1.0.0 * / public function ajax_search () if (isset ($ _REQUEST ['fn']) && 'get_ajax_search' == $ _REQUEST ['fn']) $ search_query = new WP_Query (array ('s' => $ _REQUEST ['términos'], 'posts_per_page' => 10, 'no_found_rows' => true,)); $ resultados = matriz (); if ($ search_query-> get_posts ()) foreach ($ search_query-> get_posts () como $ the_post) $ title = get_the_title ($ the_post-> ID); $ results [] = array ('value' => $ title, 'url' => get_permalink ($ the_post-> ID), 'tokens' => explode (", $ title),); else $ results [] = __ ('Lo siento. No hay resultados que coincidan con tu búsqueda', 'wp-typeahead'); wp_reset_postdata (); echo json_encode ($ results); die ();

Cuando se escribe algo en el formulario de búsqueda, typeahead.js lo tomará y lo enviará a través de Ajax usando el parámetro remoto del código en el último paso. Ese texto debe pasar por una función para que sea útil y es por eso que necesita el pequeño fragmento de arriba..

Toma el texto de búsqueda, lo ejecuta a través de una consulta de WordPress para devolver los resultados de los reincidentes, si existen. Esos resultados se devuelven después de codificarse con JSON para que el script pueda leer los datos correctamente.

El Código Completado

Con todo en su lugar, el archivo del complemento principal debería tener este aspecto ...

 plugin_url = plugin_dir_url (__FILE__); add_action ('wp_enqueue_scripts', array ($ this, 'wp_enqueue_scripts')); add_action ('wp_ajax_nopriv_ajax_search', array ($ this, 'ajax_search')); add_action ('wp_ajax_ajax_search', array ($ this, 'ajax_search'));  / ** * Enqueue Typeahead.js y la hoja de estilo * * @since 1.0.0 * / public function wp_enqueue_scripts () wp_enqueue_script ('wp_typeahead_js', $ this-> plugin_url. 'Js / typeahead.min.js', array ('jquery'), ", true); wp_enqueue_script ('wp_hogan_js', $ this-> plugin_url. 'js / hogan.min.js', array ('wp_typeahead_js'),", true); wp_enqueue_script ('typeahead_wp_plugin', $ this-> plugin_url. 'js / wp-typeahead.js', array ('wp_typeahead_js', '' wp_typeahead_pañales) 'admin-ajax.php')); wp_localize_script ('typeahead_wp_plugin', 'wp_typeahead', $ wp_typeahead_vars); wp_enqueue_style / cq / inc. Ajax consulta para la búsqueda * * @since 1.0.0 * / public function ajax_search () if (isset ($ _REQUEST ['fn']) && 'get_ajax_search' == $ _REQUEST ['fn']) $ search_query = new WP_Query (array ('s' => $ _REQUEST ['terms'], 'posts_per_page' => 10, 'no_found_rows' => true,)); $ results = array (); if ($ search_query-> get_posts ( )) foreach ($ search_query-> get_posts () as $ the_post) $ title = get_the_title ($ the_post-> ID); $ results [] = array ('value' => $ title, 'url' => get_permalink ($ the_post-> ID), 'tokens' => explode (", $ title),);  else else $ results [] = __ ('Lo siento. No hay resultados que coincidan con tu búsqueda.', 'wp-typeahead');  wp_reset_postdata (); echo json_encode ($ resultados);  die ();  $ bavotasan_wp_typeahead = new Bavotasan_WP_Typeahead;

Cuando descargue el complemento, tendrá la hoja de estilo y los archivos JS necesarios incluidos en el archivo ZIP..

Conclusión

Agregar un script de autocompletado a su formulario de búsqueda puede ayudar a sus usuarios a navegar a través de su sitio con mayor facilidad. Eso significa una mejor experiencia general que, con suerte, dará lugar a más visitas repetidas y un mayor tráfico. Este complemento solo necesita activarse para que funcione con sus formularios de búsqueda..

Si tiene algún comentario o comentario sobre algo que leyó anteriormente, siéntase libre de discutirlo a continuación.

Código