HTML onsearch Event Attribute - HTML Form Events Attribute

The onsearch event attribute in HTML fires when a user initiates a search within an <input> element with type="search". This event is triggered in a few specific scenarios:

Example of HTML onsearch Event Attribute

It will Execute a JavaScript when submitting a search.

index.html

Example: HTML

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

Output should be:

Definition and Usage of HTML onsearch Event Attribute

The onsearch attribute fires when a user presses the "ENTER" key or clicks the "x" button in an <input> element with type="search"

Browser Support of HTML onsearch Event Attribute

The numbers in the table specify the first browser version that fully supports the event attribute.

Syntax of HTML onsearch Event Attribute

<element onsearch="script">

Attribute Values of HTML onsearch Event Attribute

Value	Description
script	The script to be run on onsearch

Technical Details of HTML onsearch Event Attribute

Supported HTML tags:	<input type="search">

How to add a JavaScript when submitting a search

Write something in the search field and press "ENTER".

Note: The onsearch event is not supported in Internet Explorer, Firefox or Opera 12 and earlier versions.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>Write something in the search field and press "ENTER".</p>

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

<p><strong>Note:</strong> The onsearch event is not supported in Internet Explorer, Firefox or Opera 12 and earlier versions.</p>

<p id="demo"></p>

<script>
function myFunction() {
   let x = document.getElementById("myInput");
   document.getElementById("demo").innerHTML = "You are searching for: " + x.value;
}
</script>

</body>
</html>

Output should be:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Form Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference