HTML onsearch Event Attribute

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

onsearch

HTML Event AttributeThis event attribute is supported by all modern browsers.

Updated 14th October 2023

Description

The onsearch HTML event attribute is used to specify a JavaScript function that will be executed when the user presses the "Enter" key or clicks the "x" button in a search input field.

This event attribute can be used to trigger a variety of actions, such as submitting the search query to a server, performing a local search on the client side, or displaying a list of suggestions.

The following is an example of how to use the onsearch event attribute:

<input type="search" onsearch="myFunction()">

In the above example, the myFunction() function will be executed when the user presses the "Enter" key or clicks the "x" button in the search input field.

Here is an example of a simple myFunction() function:

function myFunction() {
  // Get the search query from the input field.
  var searchQuery = document.querySelector('input[type="search"]').value;

  // Submit the search query to a server.
  // ...

  // Perform a local search on the client side.
  // ...

  // Display a list of suggestions.
  // ...
}

Syntax

<element onsearch="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE html> 

  <html> 

    <head>

      <title>onsearch event</title> 

    </head> 

    <body> 

    <p>Type something and hit enter:</p> 

    <input type="search" id="testInput" onsearch="testFunction()"> 

    <p id="info"> </p> 

<script> 

function testFunction() { 

  var z = document.getElementById("testInput").value; 

  document.getElementById("info").innerHTML = "You are looking for: " + z; 

} 

</script> 

  </body> 

</html>

Result

Open in editor

Browser Support

The following information will show you the current browser support for the HTML onsearch event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.

This event attribute is supported by all modern browsers.