[TUTORIAL] Pesquisa com resultados automáticos

Nesse tutorial iremos colocar um efeito que ao clicar no botão Busca - localizado no menu, e ao escrever algumas palavras automáticamente aparecerá alguns resultados logo abaixo.





1º - Adicionando o código Javascript
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos em Todas as páginas.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScriptAo selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

O código que iremos usar para o efeito será este:

Código:


(function () {
    var pesquisauto;
    window.pesquisauto = pesquisauto = function () {
        $(document.getElementById('search_menu').getElementsByTagName('input')[1]).keyup(function () {
            if (!document.getElementById('pesquisauto')) {
                document.getElementById('hanckiresultados').insertAdjacentHTML('beforeend', '<div id="pesquisauto"></div>');
                document.getElementById('pesquisauto').style.left = this.offsetLeft + 'px';
                document.getElementById('pesquisauto').style.top = this.offsetTop + 20 + 'px';
            }
            if (this.value.length == 0 && document.getElementById('pesquisauto')) $('#pesquisauto').remove();
            else if (this.value.length > 3) {
                document.getElementById('pesquisauto').innerHTML = "";
                $.get('/search?mode=searchbox&search_keywords=' + this.value.replace(/\s/g, '+') + '&show_results=topics', function (data) {
                    if (/Sem resultados encontrados/.test(data)) {
                        document.getElementById('pesquisauto').innerHTML = "<div class=pesquisaautoresultado><center>Sem resultados encontrados</center></div>";
                    } else {
                        document.getElementById('pesquisauto').innerHTML = "";
                        for (i = 0; i < $(data).find('.topictitle').length; i++) {
                            document.getElementById('pesquisauto').innerHTML += '<div class="pesquisaautoresultado"><a href="' + $(data).find('.topictitle')[i].href + '"> ' + $(data).find('.topictitle')[i].textContent + '</a></div>';
                        }
                    }
                });
            } else {
                document.getElementById('pesquisauto').innerHTML = "<div class=pesquisaautoresultado><center>A consulta é muito curta</center></div>";
            }
        });
    };
})();
$(window).load(function () {
    pesquisauto();
});
$(document).ready(function () {
    $('#search_menu a[href="/search"]').after('<span id=hanckiresultados></span>');
});


Cliquem em criar.




2º - Adicionando o código CSS
Com o código CSS iremos aplicar um pouco de efeito visual para ficar mais bonito, vá em:
Painel de Controle -> Visualização -> Cores -> Folha CSS

Adicionaremos o o código abaixo em nossa folha CSS:

Código:


#pesquisaauto {
position: absolute;
min-width: 200px;
background-color: #FFF;
max-width: 300px;
overflow: auto;
max-height: 300px;
text-align: center;
}
.pesquisaautoresultado {
padding: 10px;
text-align: center;
border: 1px solid silver;
}


Salve.

• Resultado:
  
  
  
  

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Pesquisa com resultados automáticos