• Share
  • ?
  • Profiles ▼
  • Communities ▼
  • Apps ▼

Blogs

  • My Blogs
  • Public Blogs
  • My Updates

This community can have members from outside your organization. iMasters

  • Log in to participate
fd26864d-cb41-49cf-b719-d89c6b072893 Blog

▼ Tags

▼ Similar Entries

Compile PHP, Informi...

Blog: developerWork...
Gadde_Radhika 50J9GYTSQP
Updated
0 people like thisLikes 0
No CommentsComments 0

How to Call Backend ...

Blog: CSE-WebSphere...
ZhiJun 270004F2U3
Updated
0 people like thisLikes 0
No CommentsComments 0

All Application Lang...

Blog: DB2 Performan...
DaveBeulke 2700023WUN
Updated
0 people like thisLikes 0
No CommentsComments 0

应该立即使用 Node-RED 的五大理...

Blog: developerWork...
dwchina_community 310002PYN6
Updated
0 people like thisLikes 0
No CommentsComments 0

Register for Free Db...

Blog: Database Deve...
CindyRussell 2700016DC0
Updated
0 people like thisLikes 0
No CommentsComments 0

▼ Archive

  • January 2014
  • August 2013
  • July 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • April 2010

▼ Blog Authors

iMasters

View All Entries
Clicking the button causes a full page refresh. The user could go to the "Entry list" region to view the new content.) Entry list

Como criar uma pesquisa em Ajax para WordPress

iMasters 27000343BF | | Tags:  php ajax pesquisa javascript wphacks wordpress ‎ | 5,737 Views
Já pensou como seria interessante facilitar a busca e ajudar seus leitores a encontrarem as matérias de seu site? Que tal criar um campo de pesquisa que completa as palavras automaticamente, 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 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

  • Add a Comment Add a Comment
  • Edit
  • More Actions v
  • Quarantine this Entry
Notify Other People
notification_ex

Send Email Notification

Quarantine this entry

deleteEntry
duplicateEntry

Mark as Duplicate

  • Previous Entry
  • Main
  • Next Entry
Feed for Blog Entries | Feed for Blog Comments | Feed for Comments for this Entry