HTML DOM onsearch Event

Last Updated : 15 Jun, 2023

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>