[TUTORIAL] Pesquisa com resultados automáticos
Página 1 de 1 • Compartilhe
[TUTORIAL] Pesquisa com resultados automáticos
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
Pesquisa com resultados automáticos
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. |
- 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>');
});
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:
© Fórum dos Fóruns
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Pesquisa com resultados automáticos |
Tópicos semelhantes
» Resultados da pesquisa de satisfação!
» Resultados de Pesquisa igual do Fórum dos Fóruns
» [TUTORIAL] Remover resultados da votação
» [TUTORIAL] Pesquisa em tempo real para tópicos
» [TUTORIAL] Adicionar uma barra de pesquisa Google no fórum
» Resultados de Pesquisa igual do Fórum dos Fóruns
» [TUTORIAL] Remover resultados da votação
» [TUTORIAL] Pesquisa em tempo real para tópicos
» [TUTORIAL] Adicionar uma barra de pesquisa Google no fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos