[Edit]

JavaScript - onsearch event example

1 contributors

2 contributions

0 discussions

0 points

Created by:

a_horse

538

In this article, we would like to show you onsearch event example in JavaScript.

Quick solution:

xxxxxxxxxx
 
var myElement = document.querySelector('#search-type-element');
​
myElement.addEventListener('search', function() {
    console.log('onsearch event occurred.');
});

or:

xxxxxxxxxx
 
<input type="search" onsearch="handleSearch()" value="Example text to search.">

or:

xxxxxxxxxx
 
var myElement = document.querySelector('#search-type-element');
​
myElement.onsearch = function() {
    console.log('onsearch event occurred.');
};

Note:

<input> element type has to be defined as search.

Practical examples

Edit

There are three common ways how to use onsearch event:

with event listener,
with element attribute,
with element property.

1. Event listener based example

Edit

In this section, we want to show how to use onsearch event on input element via event listener mechanism.

xxxxxxxxxx
 
<!doctype html>
<html>
  <body>
    <input type="search" id="my-input" value="Search this text.">
    <script>
      var myInput = document.querySelector('#my-input');
​
      myInput.addEventListener('search', function() {
        console.log('onsearch event occurred.');
      });
    </script>
  </body>
</html>

Auto running

2. Attribute based example

Edit

In this section, we want to show how to use onsearch event on input element via attribute.

xxxxxxxxxx
 
<!doctype html>
<html>
  <body>
    <input type="search" onsearch="handleSearch()" value="Search this text.">
    <script>
      function handleSearch(){
        console.log('onsearch event occurred.');
      }
    </script>
  </body>
</html>

Auto running

3. Property based example

Edit

In this section, we want to show how to use onsearch event on input element via property.

xxxxxxxxxx
 
<!doctype html>
<html>
  <body>
    <input type="search" id="my-input" value="Search this text.">
    <script>
      var myInput = document.querySelector('#my-input');
​
      myInput.onsearch = function() {
        console.log('onsearch event occurred.');
      };
    </script>
  </body>
</html>