0

Neste site - http://www.euescolhiesperar.com/ - quando você digita na caixa de pesquisa, os resultados aparecem instantaneamente sem ser necessário apertar enter. Como posso fazer isso no Blogger?

Obrigado!

1 Resposta 1

3

Você pode ouvir o evento keyup do input e executar a pesquisa após isso.

Exemplo:

var search = document.getElementById('search');
var log = document.getElementById('log');

/*
  - keyup é lançado a cada tecla pressionada no input
*/
search.addEventListener('keyup', function() {
  // Cria um <li> e adiciona na <ul> apenas para exemplificar
  var li = document.createElement('li');
  li.innerHTML = "Pesquisando: " + this.value;
  log.insertBefore(li, log.firstChild);
});
<input id="search">
<hr>
<ul id="log"></ul>

Por motivos de performance, você pode fazer um debounce no evento para não realizar muitas pesquisas ao mesmo tempo (exemplo de debounce e throttle).

No exemplo a seguir, estou usando a função debounce da biblioteca lodash por motivos de praticidade:

var search = document.getElementById('search');
var log = document.getElementById('log');

/*
  - keyup é lançado a cada tecla pressionada no input
  - debounce faz com que a função só executa depois que
o usuário parar de digitar por 1 segundo
*/
search.addEventListener('keyup', _.debounce(function() {
  // Cria um <li> e adiciona na <ul> apenas para exemplificar
  var li = document.createElement('li');
  li.innerHTML = "Pesquisando: " + this.value;
  log.insertBefore(li, log.firstChild);
}, 1000));
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>

<input id="search">
<hr>
<ul id="log"></ul>

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 .