Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when the user writes something in a search field in HTML?
The onsearch attribute in HTML allows you to execute a JavaScript function when the user performs a search action in a search input field. This event triggers when the user presses ENTER or clicks the clear button (×) in browsers that support it.
Syntax
Following is the syntax for the onsearch attribute −
<input type="search" onsearch="functionName()">
The onsearch attribute calls a JavaScript function when a search event occurs on the search input field.
Example − Basic Search Event
Following example demonstrates how to use the onsearch attribute to capture search input −
<!DOCTYPE html>
<html>
<head>
<title>onsearch Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Example</h2>
<p>Enter a search term and press ENTER or click the × button:</p>
<input type="search" id="inputID" onsearch="display()" placeholder="Type your search here..." style="padding: 8px; width: 300px;">
<p><strong>Note:</strong> This feature works in Chrome, Safari, and Edge. Limited support in Firefox and Internet Explorer.</p>
<p id="result" style="color: blue; font-weight: bold;"></p>
<script>
function display() {
var searchInput = document.getElementById("inputID");
var resultElement = document.getElementById("result");
if (searchInput.value.trim() !== "") {
resultElement.innerHTML = "You searched for: " + searchInput.value;
} else {
resultElement.innerHTML = "Search cleared!";
}
}
</script>
</body>
</html>
The output displays the search term when ENTER is pressed or shows "Search cleared!" when the × button is clicked −
Search Example Enter a search term and press ENTER or click the × button: [Search input field with placeholder text] Note: This feature works in Chrome, Safari, and Edge. Limited support in Firefox and Internet Explorer. You searched for: [entered text] (appears in blue when searching)
Alternative Methods for Better Browser Support
Since onsearch has limited browser support, you can use alternative approaches that work across all browsers.
Using oninput Event
The oninput event triggers immediately as the user types, providing real-time search functionality −
<!DOCTYPE html>
<html>
<head>
<title>Real-time Search with oninput</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Real-time Search</h2>
<p>Search results update as you type:</p>
<input type="search" id="searchBox" oninput="liveSearch()" placeholder="Start typing..." style="padding: 8px; width: 300px;">
<div id="searchResults" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0; min-height: 40px;"></div>
<script>
function liveSearch() {
var query = document.getElementById("searchBox").value;
var resultsDiv = document.getElementById("searchResults");
if (query.length > 0) {
resultsDiv.innerHTML = "Searching for: <strong>" + query + "</strong><br>Results would appear here...";
} else {
resultsDiv.innerHTML = "Enter a search term to see results.";
}
}
</script>
</body>
</html>
Real-time Search Search results update as you type: [Search input field] Searching for: html (updates in real-time as user types) Results would appear here...
Using onkeypress Event
The onkeypress event can detect when ENTER is pressed for search submission −
<!DOCTYPE html>
<html>
<head>
<title>Search on ENTER Key</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Press ENTER to Search</h2>
<input type="search" id="enterSearch" onkeypress="checkEnter(event)" placeholder="Press ENTER after typing..." style="padding: 8px; width: 300px;">
<p id="enterResult" style="color: green; font-weight: bold;"></p>
<script>
function checkEnter(event) {
if (event.key === "Enter") {
var searchValue = document.getElementById("enterSearch").value;
document.getElementById("enterResult").innerHTML = "Search executed: " + searchValue;
}
}
</script>
</body>
</html>
Press ENTER to Search [Search input field] Search executed: javascript (appears when ENTER is pressed)
Browser Compatibility
Following table shows the browser support for the onsearch attribute −
| Browser | onsearch Support | Alternative Events |
|---|---|---|
| Chrome | Yes | oninput, onkeypress |
| Safari | Yes | oninput, onkeypress |
| Edge | Yes | oninput, onkeypress |
| Firefox | Limited | oninput, onkeypress |
| Internet Explorer | No | onkeypress only |
When to Use Each Method
onsearch − Use when you specifically need to detect the search event (ENTER key or × button) in modern browsers.
oninput − Use for real-time search suggestions or live filtering as the user types.
onkeypress − Use when you need to detect specific key presses like ENTER across all browsers.
Conclusion
The onsearch attribute provides a convenient way to handle search events in HTML search input fields, but has limited browser support. For better cross-browser compatibility, consider using oninput for real-time search or onkeypress to detect ENTER key presses. Choose the method that best fits your application's search functionality requirements.
243 Views
