4

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.

inserir a descrição da imagem aqui

13
  • Essa lista está no DOM ou tens a lista numa array? queres esconder as que não fazem match ou mudar a côr?
    – Sergio
    Commented 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.
    – Wellington
    Commented 28/01/2015 às 20:24
  • Podes juntar o HTML que tens?
    – Sergio
    Commented 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,
    – Wellington
    Commented 28/01/2015 às 20:35
  • Eu só queria a estrutura do HTML... mas ok vou fazer uma estrutura inventada para responder
    – Sergio
    Commented 28/01/2015 às 20:37

4 Respostas 4

3

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

3

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.

1

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
  • 1
    Ok @bigown farei o commit
    – Ricardo
    Commented 3/03/2015 às 10:30
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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .