Ajax para exibir sugestões de pesquisa no blog

Já tinha lido sobre AJAX e sabia que é a base do que hoje conhecemos como Web 2.0. Entretanto, apesar de ter participado de um mini curso no Erecomp 2007, ainda não tinha programado utilizando este conceito.

Embora goste muito de livros, prefiro começar pesquisando na web: é mais prático, as informações são mais atualizadas e é uma alternativa gratuita. O site que mais ajudou foi o Ajax Tutorial do w3school.

Minha idéia para por em prática o que tenho lido nos últimos dias foi exibir sugestões na pesquisa do blog. Para isso, adaptei o código do exemplo ajax suggest. Se você quiser adicionar essa funcionalidade ao seu blog, basta fazer as modificações a seguir no tema do seu blog Wordpress.

Pensando em manter seu tema organizado, crie um diretório para os arquivos que irá adicionar, são três.

getXmlHttp.js
Essa função irá criar um novo objeto XmlHttpRequest.

function GetXmlHttpObject() {
	try {
		// Firefox, Opera 8.0+, Safari, IE7+
		return new XMLHttpRequest();
	}
	catch(e) {
		// IE5, IE6
		try {
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e) {
			return null;
		}
	}
}

showHint.js
É a função que irá solicitar as palavras que serão as sugestões para termos de pesquisa.

var xmlhttp=null;

function showHint(str) {

	if (str.length==0) {

		document.getElementById("searchHints").innerHTML="";

		return;

	}

	xmlhttp = GetXmlHttpObject();

	xmlhttp.onreadystatechange=function() {
		if(xmlhttp.readyState==4) {
			document.getElementById("searchHints").innerHTML=xmlhttp.responseText;
		}
	}

	var url="getHint.php?q=" + str;

	xmlhttp.open("GET",url,true);

	xmlhttp.send(null);
}

getHint.php
Escolhe as palavras adequadas de acordo com o que é digitado no textbox de pesquisa. Adicione ao array $a palavras relacionadas ao conteúdo do seu blog.

<?php

$a[]="ajax";
$a[]="wordpress";

//obter o parâmetro q da URL
$q=$_GET["q"];

//procurar palavras no array quando q>0
if (strlen($q) > 0) {
	$hint='';
	for($i=0; $i<count($a); $i++) {
		if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {
			$hint .= '<a href="http://tatianeps.net/index.php?s='.$a[$i].'" title="Clique para pesquisar sobre: '.$a[$i].'">'.$a[$i]."</a><br />";
		}
    }
}

// Define resposta para "Sem sugestões" caso não seja encontrada palavra correspondente ao que foi digitado
if ($hint == "") { $response=utf8_encode("Sem sugestões"); }
else { $response=$hint; }

// Enviar resposta
echo $response;
?>

A seguir, edite os arquivos header.php e sidebar.php do tema do blog.

Antes de começar, faça uma cópia dos arquivos que irá modificar. Se precisar da versão anterior, será mais fácil com o backup.

header.php
Adicione as linhas abaixo que irão incluir o javascript externo getXmlHttp.js e showHint.js.

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

sidebar.php
Edite o formulário de pesquisa. Adicione onkeyup=”showHint(this.value)” ao textbox de pesquisa.

<input name="s" type="text" id="searchText" value="" tabindex="1" onkeyup="showHint(this.value)" />

Adicione a div a seguir antes de fechar o formulário, </form>, ou no local onde ficar mais conveniente de acordo com o tema do seu blog.

<div id="searchHints"></div>

Lembre-se que a id “searchHints” deve ter o mesmo nome aqui e no showHint.js. Você também pode adicionar esse id ao style.css para que a forma como as sugestões são exibidas também estejam de acordo com o tema to seu blog.

20/out/09: Post atualizado com sugestão do leitor Gustavo.

posts relacionados

• Adicione o botão do Google Buzz no seu blog Wordpress
• Novo projeto: tatianepires.net
• Do Windows para o Linux
• Urls curtas em blogs Wordpress

3 comentários