SummArg | Cursos y recursos para webmasters

16/08/2011

Crear un campo de búsqueda con autocompletar en AJAX para WordPress

En WordPress API compartieron un snippet para lograr que el plugin jQuery autocomplete funcione en los campos de búsqueda de nuestro theme WordPress. Primero debemos descargar el plugin en cuestión y el framework jQuery, los colocamos dentro de una carpeta llamada /scripts/ dentro del theme. Luego abrimos el archivo header.php y colocamos antes del cierre de la etiqueta </head> el siguiente código:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/scripts/jquery.autocomplete.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
    var data = '<?php global $wpdb; $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms"); foreach ($search_tags as $mytag){ echo $mytag->name. " "; } ?>'.split(" ");
    $("#SEARCH_INPUT_BOX").autocomplete(data);
})
</script>

Por último deberás cambiar la línea en donde indica #SEARCH_INPUT_BOX por el ID del searchbox de tu theme.

Dejar un comentario