HTML DOM onsearch Event

Last Updated : 12 Jul, 2025

The onsearch event in HTML DOM occurs when a user searches using an <input> element with type="search". This event works when the user press "Enter" or clicks "x" in the search box.

Supported tags:

<input type="search">

Syntax:

In HTML:

<element onsearch="myScript">

In JavaScript:

object.onsearch = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("search", myScript);

Example: Using the addEventListener() method.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM onsearch Event
    </title>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <input type="search" 
           id="searchID" 
           placeholder="Custom Search">
    <p id="try"></p>
  
    <script>
        document.getElementById(
            "searchID").addEventListener(
                "search", GFGfun);
        function GFGfun() {
            let GFG = document.getElementById(
                "searchID");
            document.getElementById("try").innerHTML =
                "Showing results for " + GFG.value;
        }
    </script>
</body>

</html>

Output:

Supported Browsers: The browsers supported by HTML DOM onsearch Event are listed below:

Google Chrome
Apple Safari
Opera

HTML Introduction

Vijay Sirra

Improve

Article Tags :

HTML DOM onsearch Event

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?