HTML onsearch Attribute

Introduction

The onsearch attribute is an inline event handler for the search event on <input type="search">. It runs JavaScript when the user commits a search — by pressing Enter or clicking the browser’s clear (×) button on the search field. Unlike oninput, it does not fire on every keystroke. Use it to fetch results, filter a list, or navigate when the user finishes typing their query. Prefer addEventListener("search", …) in production; inline onsearch is great for learning.

What You’ll Learn

Purpose of onsearch Attribute

The primary purpose of onsearch is to run custom JavaScript when the user performs a search action in a search input — filter results, fetch data from a server, update the UI, or log analytics for the submitted query.

The search event is designed for <input type="search">, which browsers may render with a built-in clear control. The event fires when the user confirms their search, not while they are still typing.

📝 Syntax

Set onsearch on an <input type="search"> or assign element.onsearch in JavaScript:

<input type="search" id="q" onsearch="performSearch()">

<script>
  q.onsearch = performSearch;
  q.addEventListener("search", performSearch);
</script>

Syntax Rules

• Value is JavaScript executed when the search event fires.
• Only meaningful on <input type="search">.
• Fires when the user presses Enter or clears the search field.
• Does not fire on every keystroke — use oninput for that.
• Also assignable as element.onsearch in script.
• Modern alternative: addEventListener("search", handler).
• Read the query with inputElement.value inside your handler.

💎 Values

The onsearch attribute accepts a string of JavaScript code:

• onsearch="performSearch()" — Call a named function.
• onsearch="filterResults()" — Filter a list on commit.
• JavaScript: searchInput.onsearch = () => { … } — property assignment.

function performSearch() {
  var query = document.getElementById("searchInput").value.trim();
  if (query) {
    result.textContent = "Searching for: " + query;
  } else {
    result.textContent = "Search cleared — showing all results";
  }
}

document.getElementById("searchInput").addEventListener("search", performSearch);

Applicable Elements

onsearch vs oninput vs onchange

Examples Gallery

Inline search handler, dynamic assignment, and filtering a list when the user commits a search.

<input type="search" id="searchInput"
  placeholder="Search here…"
  onsearch="performSearch()">
<p id="result"></p>

<script>
  function performSearch() {
    var q = document.getElementById("searchInput").value.trim();
    document.getElementById("result").textContent =
      q ? "You searched for: " + q : "Search cleared";
  }
</script>

<script>
  document.getElementById("dynamicSearch").onsearch = function () {
    var value = this.value.trim();
    log.textContent = value
      ? "You searched for: " + value
      : "Search cleared!";
  };
</script>

searchInput.addEventListener("search", function () {
  var q = this.value.trim().toLowerCase();
  items.forEach(function (item) {
    var match = !q || item.textContent.toLowerCase().includes(q);
    item.hidden = !match;
  });
});

♿ Accessibility

• Use a visible label — Pair type="search" with <label for="…"> or aria-label.
• Announce results — Use aria-live="polite" on a region that updates after search.
• Keyboard support — Enter must work; do not rely only on mouse clicks.
• Clear action — When search is cleared, restore the full result set and announce it.
• Do not trap focus — After search, keep tab order logical for screen reader users.

💡 Best Practices