HTMLInputElement: search event
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The search event is fired when a search is initiated using an <input> element of type="search".
There are several ways a search can be initiated, such as by pressing Enter while the <input> is focused, or, if the incremental attribute is present, after a UA-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the event is debounced).
Current UA implementations of <input type="search"> have an additional control to clear the field. Using this control also fires the search event. In that case the value of the <input> element will be the empty string.
This event is not cancelable.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("search", (event) => { })
onsearch = (event) => { }
Event type
A generic Event.
Examples
// addEventListener version
const input = document.querySelector('input[type="search"]');
input.addEventListener("search", () => {
console.log(`The term searched for was ${input.value}`);
});
// onsearch version
const input = document.querySelector('input[type="search"]');
input.onsearch = () => {
console.log(`The term searched for was ${input.value}`);
};
Specifications
This event is not part of any specification.
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
search event
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Non-standard. Check cross-browser support before using.