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 ao leitor.
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 seguinte pedido ao SQL: SELECT * FROM matable WHERE ‘name’ LIKE ‘$search%’.
Via Ajax, enviaremos os 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. Essa página irá enviar um pedido ao banco de dados do WordPress e mostrará as tags como uma 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 um pedido para a nossa base de dados WordPress como forma de receber as tags que se iniciam com essas mesmas palavras.
Parte 2: AJAX
Precisaremos programar 4 funções Javascript, de forma a recriar a nossa pesquisa que completa as palavras automaticamente:
- A função ajax() irá criar um objeto XMLHTTPRequest.
- A função request() irá enviar um pedido em Ajax para puxar o nosso arquivo gettags.php.
- A função return() irá retornar os dados do arquivo gettags.php.
- A função selected() 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, podemos editar 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 dados recebidos a partir do pedido, bem como um evento Javascript no formulário de pesquisa:
<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 Wordpress utilizam 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 para palavras automaticamente! Se tiver alguma questão, deixe um comentário.
Até a próxima!
artigo publicado originalmente no iMasters, por Paulo Faustino
