Trigger event when user starts typing in search field

Question

On the site there is a search field where the user enters the product and performs the search.

I would like to trigger a Javascript event at the moment the user starts typing the text in the search field.

Is there any way to do that?

Answer 1

You can do it in two ways. The first is to use the event onkeyup in one tag and the other is to use the function keyup() 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">

You can read more about them:

• https://api.jquery.com/keyup/
• https://www.w3schools.com/jsref/event_onkeyup.asp

Answer 2

If you need to use pure javascript can put the event onkeyup in the search input, assigning a javascript function, and in this function do the search action:

function buscar(){
  //Ação de busca
  alert('Buscando...');
}

<input type="text" onkeyup="buscar()">

If you are using Jquery, you can use the event keyup, for every time the user enters something trigger an event:

$("#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">

There are also the events keydown and keypress, but for your case I consider keyup better. You can see the difference here.

Now you just need to adapt to your code.