246

In HTML5, the search input type appears with a little X on the right that will clear the textbox (at least in Chrome, maybe others). Is there a way to detect when this X is clicked in Javascript or jQuery other than, say, detecting when the box is clicked at all or doing some sort of location click-detecting (x-position/y-position)?

5

27 Answers 27

146

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

8
  • 3
    Thanks, can't figure out when search event happens other than when you click on the 'x'. It doesn't seem to fire on keyup, blur or when form it's in is submitted. But this deserves to be marked as an answer.
    – Maksim Vi.
    Apr 11, 2013 at 19:40
  • 4
    The search event should fire when the user presses Enter. And if the search box has the incremental attribute, it will also fire when the user stops typing for a second.
    – Pauan
    Apr 11, 2013 at 21:04
  • 7
    FYI: as of the writing of this comment, this only works in Chrome.
    – Jason
    Mar 11, 2014 at 21:17
  • 4
    IE11 triggers the input event but not the search event. Jan 20, 2015 at 22:14
  • 6
    The "search" event is non-standard. See this. I would not recommend it's use without a poly-fill. Apr 3, 2018 at 23:13
104

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).

3
  • 4
    Awesome, simply awesome. Many thanks saved me time trying to figure this one out. Jun 24, 2015 at 13:39
  • It seems that Firefox changed its behaviour since? I tested with Firefox 42.0 and it treats the change event just like Chrome, firing only on Enter or focus lost.
    – Suzana
    Jan 27, 2016 at 16:34
  • 1
    I like the on input option... nice!
    – Cam Tullos
    Sep 1, 2017 at 1:46
102

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)
});
2
36

Modern 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) { 
  // do stuff
})` 
3
  • 12
    thanks for this, but it doesn't actually answer the question! yes, you can use your method to determine if the value after input is empty string, but you haven't necessarily determined that someone clicked the X. if you wanted to do something specifically when a user clicked the X, your answer does not solve it :)
    – Jason
    Nov 22, 2020 at 3:08
  • 4
    @Jason It does acctually. When someone clicked the X the value is empty so just check for length. document.getElementById('searchInput').addEventListener('input', function (e) { let length = $(this).val().length; });
    – NoWar
    Jan 27, 2021 at 6:58
  • 1
    @NoWar if the user types text into the box and then deletes it, that will also trigger this event with an empty string, but is not the same action as clicking the X. If you need to perform some action only when the user clicks the X, but not when they simply delete their text (which was my use case), @Jason is right that this solution alone won't solve the problem. In my case, checking for if (!e.currentTarget.value && !e.inputType) worked. (Noticed in DevTools that the event object always includes an inputType value when the text is deleted, but not when the X is clicked.) Aug 2, 2023 at 5:21
18

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>
2
  • 7
    For me, the change event doesn't fire until blur basically. Simply clicking the (x) inside the search field of Chrome doesn't seem to fire any event for me. After further investigation (and reading the comments below) I got click to work for me. So $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} }); works on my end
    – Jannis
    Apr 8, 2011 at 10:30
  • 2
    But $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} }); would also trigger when the user clicks into the input field.
    – Scott
    Dec 1, 2015 at 20:10
8

I know this is an old question, but I was looking for the similar thing. Determine when the 'X' was clicked to clear the search box. None of the answers here helped me at all. One was close but also affected when the user hit the 'enter' button, it would fire the same result as clicking the 'X'.

I found this answer on another post and it works perfect for me and only fires when the user clears the search box.

$("input").bind("mouseup", function(e){
   var $input = $(this),
   oldValue = $input.val();

   if (oldValue == "") return;

   // When this event is fired after clicking on the clear button
   // the value is not cleared yet. We have to wait for it.
   setTimeout(function(){
     var newValue = $input.val();

      if (newValue == ""){
         // capture the clear
         $input.trigger("cleared");
      }
    }, 1);
});
5

It made sense to me that clicking the X should count as a change event. I already had the onChange event all setup to do what I needed it to do. So for me, the fix was to simply do this jQuery line:

$('#search').click(function(){ $(this).change(); });
1
  • If you want this to trigger when the clear button is pressed, you can also add a check for the input's value, ala Jannis' comment below: stackoverflow.com/questions/2977023/… if (this.value === "") { ... }
    – Sam
    Apr 25, 2011 at 22:39
4

It doesn't seem like you can access this in browser. The search input is a Webkit HTML wrapper for the Cocoa NSSearchField. The cancel button seems to be contained within the browser client code with no external reference available from the wrapper.

Sources:

Looks like you'll have to figure it out through mouse position on click with something like:

$('input[type=search]').bind('click', function(e) {
  var $earch = $(this);
  var offset = $earch.offset();

  if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
    // your code here
  }
});
2
  • well, that sucks. maybe i'll go with plan B, which was run an event onClick if the input is now empty... maybe put it on a 25ms timer
    – Jason
    Jun 4, 2010 at 20:59
  • @Jason yeah, and you can use the code I put above to only run it if the click occurred in the area where the X is. That in addition to checking if the input is empty like you said should suffice
    – mVChr
    Jun 4, 2010 at 21:35
3

Full Solution is here

This will clear search when search x is clicked. or will call the search api hit when user hit enter. this code can be further extended with additional esc keyup event matcher. but this should do it all.

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

Cheers.

2

I believe this is the only answer that fires ONLY when the x is clicked.

However, it is a bit hacky and ggutenberg's answer will work for most people.

$('#search-field').on('click', function(){
  $('#search-field').on('search', function(){
    if(!this.value){
      console.log("clicked x");
      // Put code you want to run on clear here
    }
  });
  setTimeout(function() {
    $('#search-field').off('search');
  }, 1);
});

Where '#search-field' is the jQuery selector for your input. Use 'input[type=search]' to select all search inputs. Works by checking for a search event (Pauan's answer) immediately after a click on the field.

2

Here's one way of achieving this. You need to add incremental attribute to your html or it won't work.

window.onload = function() {
  var tf = document.getElementById('textField');
  var button = document.getElementById('b');
  button.disabled = true;
  var onKeyChange = function textChange() {
    button.disabled = (tf.value === "") ? true : false;
  }
  tf.addEventListener('keyup', onKeyChange);
  tf.addEventListener('search', onKeyChange);

}
<input id="textField" type="search" placeholder="search" incremental="incremental">
<button id="b">Go!</button>

2

The original question is "Can I detect a click of the 'x'?". This can be achieved by "sacrificing" Enter in the search event.

There are many events firing at different times in the lifecycle of an input box of type search: input, change, search. Some of them overlap under certain circumstances. By default, "search" fires when you press Enter and when you press the 'x'; with the incremental attribute, it also fires when you add/remove any character, with a 500ms delay to capture multiple changes and avoid overwhelming the listener. The trouble is, search generates an ambiguous event with input.value == "", because there are three ways it could have turned empty: (1) "the user pressed the 'x'", (2) "the user pressed Enter on an input with no text", or (3) "the user edited the input (Backspace, cut, etc) till the input became empty, and eventually incremental triggered the search event for the empty input".

The best way to disambiguate is to take Enter out of the equation, and have search fire only when the 'x' is pressed. You achieve that by suppressing the Enter keypress altogether. I know it sounds silly, but you can get the Enter behavior back under better controlled circumstances via the keydown event (where you'd do the suppressing too), the input event or the change event. The only thing that is unique to search is the 'x' click.

This removes the ambiguity if you don't use incremental. If you use incremental, the thing is, you can achieve most of the incremental behavior with the input event (you'd just need to re-implement the 500ms debouncing logic). So, if you can drop incremental (or optionally simulate it with input), this question is answered by a combination of search and keydown with event.preventDefault(). If you can't drop incremental, you'll continue to have some of the ambiguity described above.

Here's a code snippet demonstrating this:

inpEl = document.getElementById("inp");
monitor = document.getElementById("monitor");

function print(msg) {
  monitor.value += msg + "\n";
}

function searchEventCb(ev) {
  print(`You clicked the 'x'. Input value: "${ev.target.value}"`);
}

function keydownEventCb(ev) {
    if(ev.key == "Enter") {
    print(`Enter pressed, input value: "${ev.target.value}"`);
        ev.preventDefault();
    }
}

inpEl.addEventListener("search", searchEventCb, true);
inpEl.addEventListener("keydown", keydownEventCb, true);
<input type="search" id="inp" placeholder="Type something">

<textarea id="monitor" rows="10" cols="50">
</textarea>

In this simple snippet, you've turned search into a dedicated event that fires only when you press 'x', and that answers the question originally posted. You track input.value with the keydown for Enter.

Personally, I prefer to put an ev.target.blur() when pressing the Enter key (simulating a loss of focus for the input box), and monitor the change event to track the input.value (instead of monitoring input.value via keydown). In this way you can uniformly track input.value on focus changes, which can be useful. It works for me because I need to process the event only if the input.value has actually changed, but it might not work for everybody.

Here's the snippet with the blur() behavior (now you'll get a message even if you manually focus away from the input box, but remember, expect to see a change message only if a change actually happened):

inpEl = document.getElementById("inp");
monitor = document.getElementById("monitor");

function print(msg) {
  monitor.value += msg + "\n";
}

function searchEventCb(ev) {
  print(`You clicked the 'x'. Input value: "${ev.target.value}"`);
}

function changeEventCb(ev) {
  print(`Change fired, input value: "${ev.target.value}"`);
}

function keydownEventCb(ev) {
    if(ev.key == "Enter") {
        ev.target.blur();
        ev.preventDefault();
    }
}

inpEl.addEventListener("search", searchEventCb, true);
inpEl.addEventListener("change", changeEventCb, true);
inpEl.addEventListener("keydown", keydownEventCb, true);
<input type="search" id="inp" placeholder="Type something">

<textarea id="monitor" rows="10" cols="50">
</textarea>

2

At least in Chrome, it seems that the "X" button of the search input emits a different kind of event.

It is also stated on MDN that an InputEvent or Event can be emitted: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

Test below. You will see that text inputs will be an InputEvent with a "data" property containing the character inputted, and that X button clicks will emit an Event type.

document.querySelector('input[type=search]').addEventListener('input', ev => console.log(ev))

Therefore, it should be possible to distinguish using:

if (ev instanceof InputEvent) { ... }
1
  • This doesn't address the question, which was to detect whether the 'click' event was on the 'x' icon or the textbox itself, both of which generate a PointerEvent. You are addressing the 'input' event.
    – Neek
    Jun 6, 2023 at 7:38
1

Found this post and I realize it's a bit old, but I think I might have an answer. This handles the click on the cross, backspacing and hitting the ESC key. I am sure it could probably be written better - I'm still relatively new to javascript. Here is what I ended up doing - I am using jQuery (v1.6.4):

var searchVal = ""; //create a global var to capture the value in the search box, for comparison later
$(document).ready(function() {
  $("input[type=search]").keyup(function(e) {
    if (e.which == 27) {  // catch ESC key and clear input
      $(this).val('');
    }
    if (($(this).val() === "" && searchVal != "") || e.which == 27) {
      // do something
      searchVal = "";
    }
    searchVal = $(this).val();
  });
  $("input[type=search]").click(function() {
    if ($(this).val() != filterVal) {
      // do something
      searchVal = "";
    }
  });
});
1
  • Looks like filterVal isn't defined
    – dlsso
    Jan 27, 2016 at 20:49
1

The search or onclick works... but the issue I found was with the older browsers - the search fails. Lots of plugins (jquery ui autocomplete or fancytree filter) have blur and focus handlers. Adding this to an autocomplete input box worked for me(used this.value == "" because it was faster to evaluate). The blur then focus kept the cursor in the box when you hit the little 'x'.

The PropertyChange and input worked for both IE 10 and IE 8 as well as other browsers:

$("#INPUTID").on("propertychange input", function(e) { 
    if (this.value == "") $(this).blur().focus(); 
});

For FancyTree filter extension, you can use a reset button and force it's click event as follows:

var TheFancyTree = $("#FancyTreeID").fancytree("getTree");

$("input[name=FT_FilterINPUT]").on("propertychange input", function (e) {
    var n,
    leavesOnly = false,
    match = $(this).val();
    // check for the escape key or empty filter
    if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
        $("button#btnResetSearch").click();
        return;
    }

    n = SiteNavTree.filterNodes(function (node) {
        return MatchContainsAll(CleanDiacriticsString(node.title.toLowerCase()), match);
        }, leavesOnly);

    $("button#btnResetSearch").attr("disabled", false);
    $("span#SiteNavMatches").text("(" + n + " matches)");
}).focus();

// handle the reset and check for empty filter field... 
// set the value to trigger the change
$("button#btnResetSearch").click(function (e) {
    if ($("input[name=FT_FilterINPUT]").val() != "")
        $("input[name=FT_FilterINPUT]").val("");
    $("span#SiteNavMatches").text("");
    SiteNavTree.clearFilter();
}).attr("disabled", true);

Should be able to adapt this for most uses.

1

try this, hope help you

$("input[name=search-mini]").on("search", function() {
  //do something for search
});
1

based on event-loop of js, the click on clear button will trigger search event on input, so below code will work as expected:

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

The above code, onclick event booked a this._cleared = false event loop, but the event will always run after the onsearch event, so you can stably check the this._cleared status to determine whether user just clicked on X button and then triggered a onsearch event.

This can work on almost all conditions, pasted text, has incremental attribute, ENTER/ESC key press etc.

1
document.querySelectorAll('input[type=search]').forEach(function (input) {
   input.addEventListener('mouseup', function (e) {
                if (input.value.length > 0) {
                    setTimeout(function () {
                        if (input.value.length === 0) {
                            //do reset action here
                        }
                    }, 5);
                }
            });
}

ECMASCRIPT 2016

1

You can also handle with generic way by binding onInput event as below

<input type="search" oninput="myFunction()">
0

My solution is based on the onclick event, where I check the value of the input (make sure that it's not empty) on the exact time the event fires and then wait for 1 millisecond and check the value again; if it's empty then it means that the clear button have been clicked not just the input field.

Here's an example using a Vue function:

HTML

<input
  id="searchBar"
  class="form-input col-span-4"
  type="search"
  placeholder="Search..."
  @click="clearFilter($event)"
/>

JS

clearFilter: function ($event) {
  if (event.target.value !== "") {
    setTimeout(function () {
      if (document.getElementById("searchBar").value === "")
        console.log("Clear button is clicked!");
    }, 1);
  }
  console.log("Search bar is clicked but not the clear button.");
},
1
  • good approach but it doesn't work, firing the clear button as expected Dec 18, 2020 at 15:17
0

Looks like there isn't a good answer to this so I thought I would add another possible solution.

// Get the width of the input search field
const inputWidth = $event.path[0].clientWidth;
// If the input has content and the click is within 17px of the end of the search you must have clicked the cross
if ($event.target.value.length && ($event.offsetX < inputWidth && $event.offsetX > inputWidth - 17)) {
    this.tableRows = [...this.temp_rows];
}

Update

const searchElement = document.querySelector('.searchField');
searchElement.addEventListener('click', event => {
  // Get the width of the input search field
  const inputWidth = $event.path[0].clientWidth;
  // If the input has content and the click is within 17px of the end of the search you must have clicked the cross
  if ($event.target.value.length && ($event.offsetX < inputWidth && $event.offsetX > inputWidth - 17)) {
    this.tableRows = [...this.temp_rows];
}
});
2
  • Can you provide some code context to this snippet? What is $event referring to? Or the code inside the if? I think your solution could potentially work, though I would argue there is brittleness in relying on browser-specific layouts (i.e. where the "X" is location in the search box).
    – Mark
    Jun 24, 2021 at 15:18
  • Hi Mark I have updated the snippet with an event listener. Yes this could be brittle/fragile across browsers but like I said there isn't a 'good' answer, this is just another approach. Personally I think it is something that needs addressing higher up, adding a reference to clear in the event for example.
    – mad4power
    Jun 29, 2021 at 9:37
0

In my case I didn't want to use JQuery and my input was also generic so in some instances it could be of type 'search' but not always. I was able to get it working with a little delay based off one of the other answers in here. Basically I wanted to open a component when the input was clicked but not if the clear button was clicked.

function onClick(e: React.MouseEvent<HTMLInputElement>) {
  const target = e.currentTarget;
  const oldValue = target.value;
  setTimeout(() => {
    const newValue = target.value;
    if (oldValue && !newValue) {
      // Clear was clicked so do something here on clear
      return;
    }

    // Was a regular click so do something here
  }, 50);
};
0

You can give fuse.js a try. In the basic configuration it could be possible that to many results where filtered by the search. But you have in the options object of the fuse instance a lot of possibilities to adjust your search: https://fusejs.io/api/options.html

For example: The treshold is set by default to 0.6. If you go higher up to 1 it does not filter anything. If you go down to 0 only exact matches are in the result. Play around with these settings.

Its a client side search which is implemented in minutes and imho sufficient in a lots of use cases.

0

I might as well add my 5c worth.

The keyup event does not detect the mouse click on the X to clear the field, but the input event detects both the keystroke and the mouse click. You can distinguish between the events that trigger the input event by examining the event's originalEvent property - there are quite a few differences.

I found the simplest way is as follows:

jQuery("#searchinput").on("input",function(event) {
      var isclick = event.originalEvent.inputType == undefined;
   }   

With a keystroke, the event.originalEvent.inputType = "insertText".

I am using Chrome - not tested in other browsers but given the event object is pretty universal, my guess is this will work in most contexts.

Note that just clicking into the input does not trigger the event.

0

The selected answer uses the onsearch event, which is non-standard, but I'll go with that. I'm also going to reverse the question: "detect the clearing of a search" becomes "detect when Enter has been pressed". This will be fine if you want to shift the focus to the search results when the user presses Enter, for example, but remain in the search field when they press Escape or the X button.

Event listeners are fired in the order they are registered, so you can register a second search listener within a keydown event, and it will fire after the search has been done. The second search listener can do the things you want to do when the user intentionally performs a search.

input.addEventListener("search", () => console.log("doing the search"));

input.addEventListener("keydown", function() {
  if (event.code === "Enter")
    this.addEventListener(
      "search",
      () => console.log("focus() the results"),
      {once: true})
});

The key to this trick is the "once" option in the second search listener. It removes the listener when it has run one time, so subsequent searches are not affected.

0

some browsers have a search event, but Safari for one, does not fire it. It does fire an input event, however. I've been catching it like this for years:

$('foo').on ('input', function(e){
    let type = e.inputType || e.originalEvent.inputType;
    if (typeof(type) == 'undefined'){
        alert("Got Search");
    }
});

It may not be sound but I've been using it for years. Chrome will fire both an undefined input type and also a search, so this method works with both Safari and Chrome. Firefox doesn't even put the X in the field so it's moot with FF. The only event types you get are insert, delete search and undefined; at least I've never seen anything else

-2

On click of TextField cross button(X) onmousemove() gets fired, we can use this event to call any function.

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.