Menu
The search input type is used to designate the input as being used for search. Support is a bit arbitrary here as the spec doesn't require any special treatment for search fields. Android doesn't do anything special though, where all other browsers do. The results and autosave attributes shown above are not standard.
To clear an input field after submitting:Add a click event listener to a button. When the button is clicked, set the input field's value to an empty string. Setting the field's value to an empty string resets the input.
To clear all the input in an HTML form, use the <input> tag with the type attribute as reset.
The <input type="reset"> defines a reset button which resets all form values to its initial values.
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>
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
})`
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);
});
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(); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With