Busca do WordPress em AJAX

Por: Flávio Theruo KaminisseWednesday 22 February 2006 às 2:18 PM

Estava eu lendo meus feeds ontem, quando encontrei uma adaptação à busca do WordPress toda feita em AJAX (Asynchronous JavaScript And XML), é uma busca muito interessante e é facilmente integrada ao WordPress.

Vou fazer uma breve descrição da integração, pois no artigo HOWTO: Animated Live Search o autor explica todo o processo de uma forma muito simples.

Basicamente basta fazer uma pequena alteração no arquivo search.php adicionando estas linhas de código no início do arquivo

<?php if (isset($_GET['ajax']) && $_GET['s']) { ?>

    <?php
    //You might want to show fewer results than the standard per-page number
    $max_results = 6;
    ?>
    <h3>Search Results</h3>
    <?php if (have_posts()) : $i = 0; ?>
    <ul>
        <?php while (have_posts()) : the_post(); $i++; ?>

        <li><a href="<?php the_permalink() ?>" rel="bookmark"
              title="Permanent Link to <?php the_title(); ?>"
              ><?php the_title(); ?></a>

            <?php if ($i == $max_results) break; ?>
        <?php endwhile; ?>

            <li class="more"><a href="/?s=<?php echo urlencode($_GET['s']);
                  ?>">Get More Details in the Full View</a></li>
        </ul>

    <?php else : ?>
    <p>Sorry, nothing matched your search.</p>

    <p>&nbsp;</p>
    <?php endif; ?>

<?php } else { ?>

e no final do arquivo colocar a linha

<?php } ?>

já no arquivo searchform.php adicionar a linha

<div id="search-results"></div>

e incluir os arquivos javascript


<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js" type="text/javascript"></script>
<script src="/js/general.js" type="text/javascript"></script>

no cabeçalho da página.

Destes arquivos javascript que você vai adicionar na página, o único que você vai precisar de editar é o arquivo general.js, pois você terá que substituir o endereço do site pelo endereço do seu site.

Disponibilizeis todos os arquivos que eu modifiquei, quem quiser baixar, basta clicar aqui.

Quem tiver alguma dúvida, ou então alguma dificuldade para fazer a integração, basta me escrever, ou então postar sua dúvida neste espaço que tentarei responder o mais rápido possível.

Vale lembrar também que estilos podem ser aplicados ao resultado da busca, juntamente com o código de retorno que pode ser totalmente editado se adequando a cada caso, agradecendo o Henrique por ter adaptado os estilos para a nova busca.

Eu gostei bastante desta “funcionalidade”, espero que todos gostem.

Depois estudarei o código com mais tempo e tentarei integrar com o “framework” XAJAX.

[update] Seguindo a dica do Cosme, estou postando um link para o site do Tiago Madeira, onde ele fala de uma busca, também em AJAX (Asynchronous JavaScript And XML), um pouco diferente desta, acho que vale a pena conferir. Valeu Cosme, e excelente artigo Tiago. [/update]