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:
ajax(), que creará el objeto XMLHTTPRequest.request(), que enviará las peticiones al archivo PHP.return(), que recuperará los datos que envíe el archivo PHP.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:
- Una llamada al método
request()cada vez que se presione una tecla en el campo de búsqueda. - 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
16 Comentarios | deja el tuyo



Primero decir que la entrada me ha resultado muy interesante. Y como segundo pedirte un favor en el enlace que has puesto como descarga no puedo descargar el codigo fuente sino el splash de office.
Enhorabuena por el post. Simple y claro. Una explicación perfecta del uso de AJAX, y con aplicación interesante.
Y es que a veces lo simple es suficiente.
Ya está solucionado lo del enlace, disculpa por las molestias
Un saludo!
Las posibilidads de dañar la base de data son altisimas. Una mejor opcion es la utilización de index.
Muchas Gracias lo implemente en mi blog….
Lo acabo de ver, Zarpele, te ha quedado muy bien.
Un saludo!
Sois los putos amos, no tengo más que decir.
No me resulta :S y seguí todos los pasos. Qué puede ser??? Ayuda porfaaa
En esos casos lo mejor es, para ver si son cosas del JavaScript, hacer las pruebas con Firefox y estar mirando la consola de errores; allí podrás detectar qué va mal. También podría ser cosas de PHP y MySQL; tendrías que revisar eso a aparte.
Un saludo!
Gracias Cristián, veré que pasa. Saludos
Hola, interesante, pero soy tan ignorante que no entiendo donde hacer los cambios, descargue los archivos, los puse en un durectorio, cambie el usuario de la BD, lo nombres de campos, pero, ¿Qué otros cambios?, ¿se puede incluir un encabesado en el mismo formulario.htm?
Si alguien tiene paciencia y me indica…
Agradecido… Y disculpen lo ignorante…
No me funciona, alguien podria pasarme un eje,mplo completo q le funcione??
alfonsodvv@gmail.com
A young universe is challenged by the distant starlight problem, which presents the dilemma of how light from objects millions or billions of light years away could be observed in a young universe. ,
Muy bueno el ejemplo … tuve que hacerle unas
modificaciones al código de ajax.php porque
trabajo con postgres … pero de todas formas
funciona a la perfección … muchas gracias.
Gracias, estaba en la búsqueda de esta herramienta autocompletar para mi web.