HTMLInputElement: search event

{{APIRef("HTML DOM")}}{{non-standard_header}}

The search event is fired when a search is initiated using an {{HTMLElement("input")}} element of type="search".

There are several ways a search can be initiated, such as by pressing <kbd>Enter</kbd> while the {{HTMLElement("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 {{glossary("debounce", "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 {{HTMLElement("input")}} element will be the empty string.

This event is not cancelable.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

addEventListener("search", (event) => { })

onsearch = (event) => { }

Event type

A generic {{domxref("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

{{Compat}}