[Resolvido] Como criar uma pesquisa em Ajax para WordPress

[RSS iMasters 5]

Já pensou como seria interessante facilitar a busca e ajudarseus leitores a encontrarem as matériasde seu site? Que tal criar um campo de pesquisa que completa as palavrasautomaticamente, tal como acontece com o Google?

 

Neste artigo, vamos criar uma pesquisa em Ajax, usando portanto PHP e Ajax. A ideia original é dos colegas do wphacks. Como este código é experimental, as buscas no SQL não estão devidamente otimizadas, tenha isso em mente.

 

 

A ideia

Usaremos tags como uma lista de palavras-chave a serem sugeridas aoleitor.

 

Quando o leitor começar a escrever na sua barra de pesquisa,usaremos Javascript para enviar um pedido a uma página PHP que fará o seguintepedido ao SQL: SELECT * FROM matable WHERE ?name? LIKE ?$search%?.

 

Via Ajax, enviaremosos resultados pesquisados para a nossa página, para mostrá-los ao leitor.

 

 

 

Parte 1: PHP

A primeira coisa a se fazer é criar uma página PHP. Essapágina irá enviar um pedido ao banco de dados do WordPress e mostrará as tags comouma lista não ordenada em HTML.

 

<?php

 

if (isset($_POST['search'])) {

 

$search = htmlentities($_POST['search']);

 

} else $search ='';

 

$db = mysql_connect('localhost','root',''); //Don't forget to change

 

mysql_select_db('wp', $db); //theses parameters

 

$sql = "SELECT name from wp_terms WHERE name LIKE '$search%'";

 

$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();

 

?>Esse código é bastante simples: ele recebe um parâmetro POST(as letras escritas no campo de pesquisa pelo visitante) e depois envia umpedido para a nossa base de dados WordPress como forma de receber as tags quese iniciam com essas mesmas palavras.

 

 

Parte 2: AJAX

Precisaremos programar 4 funções Javascript, de forma arecriar a nossa pesquisa que completa as palavras automaticamente:

 

•  A função ajax()irá criar um objeto XMLHTTPRequest.
• A funçãorequest() irá enviar um pedido em Ajax para puxar o nosso arquivo gettags.php.
• A funçãoreturn() irá retornar os dados do arquivo gettags.php.
• A funçãoselected() irá atualizar o campo de pesquisa.

Comece por criar um arquivo com o nome gettags.js e cole ládentro o seguinte código:

 

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", "wp-content/themes/openbook-fr/gettags.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');

 

cible.value = choice;

 

document.getElementById('tag_update').style.display = "none";

 

}

Parte 3: editar o template

Agora que temos nosso PHP e Javascript prontos, podemoseditar o arqivo searchform.php do nosso template WordPress.

 

O seu novo arquivo searchform.php deverá ficar assim:

 

<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="Search" />

 

</div>

 

</form>Teremos de adicionar uma div, que irá mostrar os dadosrecebidos a partir do pedido, bem como um evento Javascript no formulário depesquisa:

 

<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="Search" class="button" />

 

</div>

 

<div id="tag_update"></div>

 

</form>

Parte 4: CSS

Tendo em consideração que todos os templates Wordpressutilizam sistemas de cores diferentes, este é apenas um exemplo do que poderáfazer com o seu CSS.

 

#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;

 

}É isso! Acabamos de criar uma pesquisa que completa parapalavras automaticamente! Se tiver alguma questão, deixe um comentário.

 

Até a próxima!

 

 

http://imasters.com.br/artigo/19737/wordpress/como-criar-uma-pesquisa-em-ajax-para-wordpress/