How do you detect the clearing of a "search" HTML5 input?

Actually, there is a "search" event that is fired whenever the user searches, or when the user clicks the "x". This is especially useful because it understands the "incremental" attribute.

Now, having said that, I'm not sure if you can tell the difference between clicking the "x" and searching, unless you use an "onclick" hack. Either way, hopefully this helps.

Dottoro web reference

Bind search-event the search box as given below-

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});

I want to add a "late" answer, because I struggled with change, keyup and search today, and maybe what I found in the end may be useful for others too. Basically, I have a search-as-type panel, and I just wanted to react properly to the press of the little X (under Chrome and Opera, FF does not implement it), and clear a content pane as a result.

I had this code:

 $(some-input).keyup(function() { 
    // update panel
 });

 $(some-input).change(function() { 
    // update panel
 });

 $(some-input).on("search", function() { 
    // update panel
 });

(They are separate because I wanted to check when and under which circumstances each was called).

It turns out that Chrome and Firefox react differently. In particular, Firefox treats change as "every change to the input", while Chrome treats it as "when focus is lost AND the content is changed". So, on Chrome the "update panel" function was called once, on FF twice for every keystroke (one in keyup, one in change)

Additionally, clearing the field with the small X (which is not present under FF) fired the search event under Chrome: no keyup, no change.

The conclusion? Use input instead:

 $(some-input).on("input", function() { 
    // update panel
 }

It works with the same behaviour under all the browsers I tested, reacting at every change in the input content (copy-paste with the mouse, autocompletion and "X" included).

Using Pauan's response, it's mostly possible. Ex.

<head>
    <script type="text/javascript">
        function OnSearch(input) {
            if(input.value == "") {
                alert("You either clicked the X or you searched for nothing.");
            }
            else {
                alert("You searched for " + input.value);
            }
        }
    </script>
</head>
<body>
    Please specify the text you want to find and press ENTER!
    <input type="search" name="search" onsearch="OnSearch(this)"/>
</body>

Easy - readable - and short solution

Wow, there are some really complicated answers in here for a really simple problem.

Simply add a listener for 'input' on your search input which will capture when the user types something in the input or clicks on the clear icon.

document.getElementById('searchInput').addEventListener('input', (e) => {
  console.log(`Input value: "${e.currentTarget.value}"`);
})

<input id="searchInput" type="search" placeholder="Search" />

If you can't use ES6+ then here is the converted code for you:

document.getElementById('searchInput').addEventListener('input', function(e) { 
  // Yay! You make it in here when a user types or clicks the clear icon
})`

How do you detect the clearing of a "search" HTML5 input?

Easy - readable - and short solution

Related

Recent Posts