[Tutorial] Pesquisa com resultados automáticos

Autor: Hancki
Funcionalidade: Em todas as versões
Descrição: 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.

Painel de Controle Módulos HTML & Javascript Gestão dos códigos Javascripts

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>');
});

Painel de Controle Visualização Imagens e Cores Cores 'Aba' Folha de estilo 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;
}

• Resultado: