Trigger event when user starts typing in search field

Asked

Viewed 5,626 times

3

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?

javascript javascript-events

  • edit your question and enter your code from the search field to help visualize the problem

  • Actually I did not create a code, I would like some example to be able to create it. I am beginner in the language.

2 answers

2

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:

  • Thank you very much Gabriel. I will make the implementation following your guidelines =)

  • @Danilodias if the answer solved your problem, mark it as accept :D

1

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.

  • Thank you very much Gabriel. I will make the implementation following your guidelines =)

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.