[TUTORIAL] Pesquisa com resultados automáticos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Pesquisa com resultados automáticos Empty [TUTORIAL] Pesquisa com resultados automáticos

Mensagem por Sennior em 31.01.15 21:32


[TUTORIAL] Pesquisa com resultados automáticos Chatbo10

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.


--> Tutoriais, dicas e astúcias <--
Pesquisa com resultados automáticos



- 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 >>

[TUTORIAL] Pesquisa com resultados automáticos Painel13

[TUTORIAL] Pesquisa com resultados automáticos 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Pesquisa com resultados automáticos 110210Seta 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.
[TUTORIAL] Pesquisa com resultados automáticos 110310Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Pesquisa com resultados automáticos 110410Seta 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.




- 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:
    [TUTORIAL] Pesquisa com resultados automáticos WhaEJcS





© Fórum dos Fóruns


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

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16374
Pontos Ativos : 20885

Ver perfil do usuário https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum