Autocompletar campo de búsquedas en WordPress usando AJAX

El resultado del how-to que voy a describir es el siguiente:

Lo muestro antes que nada para que veas de que estoy hablando, y si te interesa ya seguirás leyendo, sino pues te ahorras tiempo valioso.

La mayor parte del tip lo he tomado de esta entrada (en inglés), aunque le he mejorado algunas cosas que lo hacen mucho más eficiente. La idea, como dice el título, es implementar mediante AJAX un método de autocompletación de palabras cuando nuestros lectores deseen buscar algo. Todo esto basado en los tags que hayamos asignado a cada post.

Necesitaremos entonces seguir estos sencillos 4 pasos:

1. Código PHP

Debes crear un archivo PHP (llámalo por ejemplo ajax.php), y lo pones en alguna parte de tu servidor (yo recomiendo: la carpeta de tu theme):

<?php
if (isset($_POST['search']))
    $search = htmlentities($_POST['search']);
else
   $search ='';
$db = mysql_connect('localhost','usuario','password'); //Don't forget to change
mysql_select_db('nombre base de datos', $db);           //theses parameters
$arreglo = explode(' ', $search);
if($arreglo[count($arreglo)-1]=="" || $arreglo[count($arreglo)-1]==" "){
   mysql_close();
   die();
}
$sql = "SELECT name from wp_terms WHERE name LIKE '%".$arreglo[count($arreglo)-1]."%'";
$req = mysql_query($sql) or die();
echo '<ul>';
while ($data = mysql_fetch_array($req))
{
   echo '<li><a href="#" onclick="selected(this.innerHTML);">'.htmlentities($data['name']).'</a></li>';
}
echo '</ul>';
mysql_close();
?>

No te olvides de modificar los datos de usuario y contraseña, así como el nombre de la base de datos. Este sencillo script se encargará de buscar en la base de datos los tags que coincidan con lo que el usuario está empezando a buscar.

2. Código JavaScript

Luego, debes crear un archivo JavaScript (llámalo por ejemplo buscar.js), y ponerlo en alguna parte de tu servidor (yo recomiendo: la carpeta de tu theme):

var myAjax = ajax();
function ajax() {
   var ajax = null;
   if (window.XMLHttpRequest) {
      try {
         ajax = new XMLHttpRequest();
      }
      catch(e) {}
   }
   else if (window.ActiveXObject) {
      try {
         ajax = new ActiveXObject("Msxm12.XMLHTTP");
      }
      catch (e){
         try{
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e) {}
      }
   }
   return ajax;
}
function request(str) {
   //Don't forget to modify the path according to your theme
   myAjax.open("POST", "http://tusitio.com/wp-content/themes/TU_TEMA/ajax.php");
   myAjax.onreadystatechange = result;
   myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   myAjax.send("search="+str);
}
function result() {
   if (myAjax.readyState == 4) {
      var liste = myAjax.responseText;
      var cible = document.getElementById('tag_update').innerHTML = liste;
      document.getElementById('tag_update').style.display = "block";
   }
}
function selected(choice){
   var cible = document.getElementById('s');
      var posc = 0;
      for (var i=cible.value.length-1; i>=0; i--)   {
         var caracter = cible.value[i];
         if (caracter==" "){
            posc = i+1;
            break;
         }
      }
   cible.value = cible.value.substring(0,posc)+""+choice+" ";
      cible.focus();
   document.getElementById('tag_update').style.display = "none";
}

Éste se compone de cuatro métodos:

1. ajax(), que creará el objeto XMLHTTPRequest.
2. request(), que enviará las peticiones al archivo PHP.
3. return(), que recuperará los datos que envíe el archivo PHP.
4. selected(), que actualizará el campo de búsqueda.

Por supuesto debes cambiar el header de tu theme de tal manera que cargue este archivo javascript. Si creaste el archivo en la carperta de tu theme lo tienes fácil, simplemente deberás añadir lo siguiente en el archivo header.php:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/buscar.js"></script>

No olvides cambiar la ruta donde pusiste el archivo PHP (línea 25 del archivo buscar.js).

3. Cambiando el theme

Ahora es cuando debes cambiar el formulario que tienes por defecto, por uno que implemente llamadas a las funciones javascript del paso anterior. Por lo general tendrás algo como esto:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
   <div>
      <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
      <input type="submit" id="searchsubmit" value="Buscar" />
   </div>
</form>

Lo cual debes cambiar por esto:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
    <div>
   <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" onkeyup="request(this.value);"/>
   <input type="submit" id="searchsubmit" value="Buscar" class="button" />
    </div>
    <div id="tag_update"></div>
</form>

Como puedes darte cuenta, se añaden esencialmente dos cosas:

1. Una llamada al método request() cada vez que se presione una tecla en el campo de búsqueda.
2. Una capa <div> que contendrá las palabras claves sugeridas para la búsqueda

4. Añadiendo CSS

Por último deberás añadir lo siguiente al archivo style.css de tu plantilla:

#tag_update {
   display: block;
   border-left: 1px solid #373737;
   border-right: 1px solid #373737;
   border-bottom: 1px solid #373737;
   position:absolute;
   z-index:1;
}
#tag_update ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
#tag_update li{
   display:block;
   clear:both;
}
#tag_update a {
   width:134px;
   display: block;
   padding: .2em .3em;
   text-decoration: none;
   color: #fff;
   background-color: #1B1B1C;
   text-align: left;
}
#tag_update a:hover{
   color: #fff;
   background-color: #373737;
   background-image: none;
}

Esto decorará adecuadamente el cuadro donde aparecen las sugerencias.

Créditos

Por supuesto el 99% de los créditos es para la persona que diseñó el código AJAX y demás. Aunque cabe resaltar lo que añadí por mi cuenta:

• Las sugerencias se generan en base a la última palabra escrita, y cuando se selecciona NO borra todo el contenido del cuadro de búsqueda. Esto implicó cambios tanto en el archivo javascript como en el código PHP.
• El cuadro de búsqueda es enfocado una vez se selecciona un palabra de las que son sugeridas

Descargar código fuente

19 Comentarios | deja el tuyo