Acho que quase sempre pensamos em vacilitar a vida do leitor dos nossos blogs ou site, principalmente ao acesso das postagens, na forma que ele possa encontrar os posts que deseja. O jeito mais simples é um simples campo de busca que o WordPress mesmo disponibiliza para você.  Agora imagine que bacana seria um buscador parecido com o da Google, um buscador que complete automaticamente a palavra ou frase.  Este é nosso foco de hoje, criar um buscador utilizando  Aja + PHP. A codificação é experimental, na verdade uma idéia do pessoal do wphacks, então digo que as buscas nos SQL não são devidamentes otimizadas.

VAMOS A IDEIA

Iremos usar tags como uma lista de palavras-chave a sugerir ao leitor.

No momendo que o leitor do seu blog WordPress começar a escrever na sua barra de pesquisa, iramos lançar o javascript para enviar um pedido a uma página PHP,  esta página fará o seguinte pedido ao DB SQL: SELECT * FROM matable WHERE ‘name’ LIKE ‘$search%’. Passando pelo Ajax, iremos enviar os resultados pesquisados para a nossa página, e mostrá-los ao nosso leitor.

PRIMEIRA PARTE: “THE PHP”

A primeira coisa que faremos é criar uma página PHP, está página vai enviar um pedido ao nosso DB (banco de dados) do WordPress e em seguida mostrar as tags como uma lista não ordenada em XHTM.

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

Vejamos como é simples esse código: Ele recebe um parâmetro do tipo POST (o que o usuário escrever no campo de busca) e em seguida envia um pedido ao nosso DB WordPress como uma forma de receber as tags que se iniciam com essas mesmas palavras.

VAMOS À MÁGICA!: AJAX

VAmos necessitar de programar 4 funções JS (javascript) de uma forma que seje recriada nossa pesquisa para completar as palavras automaticamente:

• A função ajax() criar um objeto XMLHTTPRequest.
• A função request() enviar um pedido em Ajax para puxar o nosso ficheiro gettags.php.
• A função return()retornar os dados do ficheiro gettags.php.
• A função selected()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_atualizar').innerHTML = liste;
                document.getElementById('tag_atualizar').style.display = "block";
        }
}
function selected(choice){
        var cible = document.getElementById('s');
        cible.value = choice;
        document.getElementById('tag_atualizar').style.display = "none";
}

PARTE TRÊS: EDITAR O TEMPLATE Feito a requisição Ajax, e tendo nosso PHP já pronto também, podemos começar a fazer a modificação em nosso template WordPress. O arquivo é o searchform.php: 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

Vamos adicionar também uma div, para que seja mostrado os dados recebidos do pedido. Utilizaremos um evento JS (Javascript) em nosso 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_atualizar"></div>
</form>

ESTILIZAÇÃO » PARTE QUATRO: CSS Sabemos que quase todos os templates wordpress utiliza esquemas de cores diferentes, este é apenas um exemplo de como montar sua CSS.

#tag_atualizar {
        display: block;
        border-left: 1px solid #373737;
        border-right: 1px solid #373737;
        border-bottom: 1px solid #373737;
        position:absolute;
        z-index:1;
}
#tag_atualizar ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
#tag_atualizar li{
        display:block;
        clear:both;
}
#tag_atualizar a {
        width:134px;
        display: block;
        padding: .2em .3em;
        text-decoration: none;
        color: #fff;
        background-color: #1B1B1C;
        text-align: left;
}
#tag_atualizar a:hover{
        color: #fff;
        background-color: #373737;
        background-image: none;
}

Isso é tudo, você acabou de criar uma pesquisa completinha e com palavras automáticas como as do Google, se tiver alguma dúvida, por favor comente. Obrigado Jean-Baptiste Jung!