4

No site existe um campo de busca onde o usuário digita o produto e realiza a busca.

Eu gostaria de disparar um evento JavaScript no momento em que o usuário começa a digitar o texto no campo de busca.

Existe de alguma forma de fazer isso?

2
  • edite sua pergunta e coloque o seu código, do campo de pesquisa, para ajudar a visualizar o problema 21/11/2018 às 14:17
  • Na verdade eu não criei um código, eu gostaria de algum exemplo para poder cria-lo. Sou iniciante na linguagem. 21/11/2018 às 15:05

2 Respostas 2

2

Você pode fazer de duas formas. A primeira é utilizar o evento onkeyup em uma tag e a outra é utilizar a função keyup() do JQuery.

JS

function busca(){
    alert("Funcionou");
}
<input type="text" onkeyup="busca()">

JQuery

$("#campo").keyup(function() {
  alert("Funcionou");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="campo">

Você pode ler mais sobre eles:

2
  • Muito Obrigado Gabriel. Vou fazer a implementação seguindo suas orientações =) 22/11/2018 às 1:32
  • @DaniloDias se a resposta resolveu o seu problema, marque-a como aceita :D 22/11/2018 às 2:26
2

Se você precisar utilizar javascript puro pode colocar o evento onkeyup no input de busca, atribuindo uma função javascript, e nessa função fazer a ação da busca:

function buscar(){
  //Ação de busca
  alert('Buscando...');
}
<input type="text" onkeyup="buscar()">

Caso esteja utilizando JQuery, pode utilizar o evento keyup, para toda vez que o usuário digitar algo disparar um evento:

$("#campo_busca").keyup(function() {
  //Ação de busca
  alert('Buscando...');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="campo_busca">

Existem também os eventos keydown e keypress, porém para o seu caso considero keyup melhor. Você pode ver a diferença aqui.

Agora você só precisa adaptar para seu código.

1
  • Muito Obrigado Gabriel. Vou fazer a implementação seguindo suas orientações =) 22/11/2018 às 1:33

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