Estou querendo colocar uma busca na página, parecida com o CTRL+F do navegador. Eu tenho uma lista de links e esta pesquisa somente apontaria para esta lista. Segue um print para melhor entendimento.
-
Essa lista está no DOM ou tens a lista numa array? queres esconder as que não fazem match ou mudar a côr?– SergioCommented 28/01/2015 às 20:14
-
Essa lista esta em um html simples. Eu gostaria de fazer igual ao Ctrl+f do navegador, conforme vamos digitando as letras ele vai "colorindo" as palavras que fazer referencia com as letras digitadas.– WellingtonCommented 28/01/2015 às 20:24
-
Podes juntar o HTML que tens?– SergioCommented 28/01/2015 às 20:29
-
Peço até desculpas Sergio, mas não posso fazer isso devido ao sigilo das informações contidas na página, que interna da empresa. Só precisava de um código que fizesse isso que o restante eu adapto aqui. Abs,– WellingtonCommented 28/01/2015 às 20:35
-
Eu só queria a estrutura do HTML... mas ok vou fazer uma estrutura inventada para responder– SergioCommented 28/01/2015 às 20:37
4 Respostas
Aqui fica uma sugestão:
function marcador(letras, el) {
el.innerHTML = el.innerText;
var rgxp = new RegExp(letras, 'g');
var span = '<span class="marcador">' + letras + '</span>';
el.innerHTML = el.innerHTML.replace(rgxp, span);
}
var input = document.getElementById('busca');
var texto = document.getElementById('texto');
var divs = texto.children;
input.onkeyup = function () {
for (var i = 0; i < divs.length; i++){
marcador(this.value, divs[i]);
}
}
.marcador {
color: red;
}
<div>Procurar:
<input id="busca" type="text" />
</div>
<div id="texto">
<div>- A língua das Mariposas</div>
<div>- A última tempestade</div>
<div>- Agonia e Êxtase</div>
<div>- Arquitetura da destruição</div>
</div>
jsFiddle: http://jsfiddle.net/otrnsqvy/1/
Explicação:
Criei uma função marcador que procura num dado elemento por uma palavra (conjunto de letras). Quando encontra envolve-as com um <span>
com uma classe de CSS que muda a cor para vermelho. Repara que no inicio faço el.innerHTML = el.innerText;
, isso é para limpar o texto de <span>
s anteriores.
Juntei também input.onkeyup = function () {
. Isso faz com que uma função seja corrida a cada vez que uma tecla é libertada. Nessa função percorro todos os elementos div
filhos de #texto
e chamo a função marcador(this.value, divs[i]);
. O this.value
dá o valor do input (as letras/palavra).
Uma forma além das citadas que pode ajudar é fazer o uso do elemento datalist
do HTML5
.
Mais informações Datalist - MDN
Como você tem uma lista de filmes pré-definida e o elemento trabalha com base nisso você pode fazer dessa forma:
OBS: Conforme você digita o nome, ele exibe apenas os filmes com os termos digitados. Um conselho é você criar a busca com os mesmos termos da lista citados na sua imagem de exemplo.
.wrapper {
display: inline-block;
width: 200px;
border: 1px solid #CCC;
font-family: "Tahoma", sans-serif;
}
.wrapper span {
display: block;
color: #CCC;
padding: 10px;
border-bottom: 1px solid #CCC;
}
.search {
margin: 10px;
padding: 5px;
display: inline-block;
border: 1px solid #CCC;
}
.search-input {
border: 0;
}
<div class="wrapper">
<span>Pesquisa</span>
<div class="search">
<input class="search-input" list="movies" placeholder="Pesquisa..."><i class="fa fa-search"></i>
</div>
<datalist id="movies">
<option value="A Era do Gelo">A Era do Gelo</option>
<option value="O Lobo de Wall Street">O Lobo de Wall Street</option>
<option value="12 Horas">12 Horas</option>
<option value="12 Rounds">12 Rounds</option>
<option value="A Dama de ferro">A Dama de ferro</option>
<option value="2 Filhos de Francisco">2 Filhos de Francisco</option>
<option value="Exterminador do Futuro">Exterminador do Futuro</option>
<option value="21 Gramas">21 Gramas</option>
<option value="1408">1408</option>
</datalist>
</div>
JSBIN: Datalist
OBS: Lembre-se de aplicar o mesmo valor do atributo LIST
do input no ID
do datalist.
Se tiver os links em um JSON por exemplo ou conseguir importa-los do banco, você poderá utilizar o JQuery Autocomplete
:
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
Ainda é possível usar um Autocomplete de múltiplas palavras, veja este link onde é mostrado como utilizar o Autocomplete com múltiplas palavras: Multiple Autocomplete.
-
1
Eu quando preciso fazer isso uso o Datalist do HTML 5. Por exemplo eu pego as informações de uma tabela (ex: categorias) e faço um foreach dentro dele. Abaixo um exemplo normal só em HTML:
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>