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
HTML onsearch Event Attribute
The HTML onsearch event attribute is triggered when a user presses the "Enter" key or clicks the search button (×) in an HTML input element with type="search". This event is specifically designed for search input fields and provides a way to execute JavaScript when a search action is performed.
Syntax
Following is the syntax for the onsearch event attribute −
<input type="search" onsearch="script">
Where script is the JavaScript code or function to execute when the search event occurs.
Parameters
The onsearch event attribute accepts the following parameter −
script − JavaScript code or function name to execute when the search event is triggered.
Browser Support
The onsearch event is primarily supported by WebKit-based browsers (Safari, Chrome) and may not work consistently across all browsers. For cross-browser compatibility, consider using standard keydown or keypress events to detect the Enter key.
Example − Basic Search Functionality
Following example demonstrates the basic usage of the onsearch event attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML onsearch Event Attribute</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
min-height: 100vh;
}
input {
border: 2px solid #fff;
background: transparent;
height: 2rem;
padding: 10px;
width: 250px;
font-size: 16px;
border-radius: 5px;
}
::placeholder {
color: #333;
}
.result {
font-size: 1.2rem;
font-weight: bold;
margin-top: 20px;
color: #333;
}
</style>
</head>
<body>
<h1>HTML onsearch Event Demo</h1>
<input type="search" onsearch="performSearch()" placeholder="Enter search term and press Enter">
<p>Type your search query and press "Enter" to trigger the search event</p>
<div class="result" id="searchResult"></div>
<script>
function performSearch() {
var searchTerm = document.querySelector("input").value;
var resultDiv = document.getElementById("searchResult");
if (searchTerm.trim() !== "") {
document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%)";
resultDiv.innerHTML = "You searched for: " + searchTerm;
} else {
resultDiv.innerHTML = "Please enter a search term";
}
}
</script>
</body>
</html>
When you enter text and press Enter, the search function executes and displays the search term −
Initial: Orange gradient background with search input field After search: Blue gradient background with "You searched for: [search term]"
Example − Search with Results Display
Following example shows a more practical search implementation with simulated search results −
<!DOCTYPE html>
<html>
<head>
<title>Search Results Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.search-container {
text-align: center;
margin-bottom: 30px;
}
input[type="search"] {
padding: 12px;
font-size: 16px;
width: 300px;
border: 2px solid #ddd;
border-radius: 25px;
}
.results {
max-width: 600px;
margin: 0 auto;
}
.result-item {
background: white;
margin: 10px 0;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="search-container">
<h1>Search Demo</h1>
<input type="search" onsearch="showResults()" placeholder="Search for HTML, CSS, or JavaScript">
</div>
<div class="results" id="results"></div>
<script>
function showResults() {
var query = document.querySelector("input").value.toLowerCase();
var resultsDiv = document.getElementById("results");
var searchData = {
"html": ["HTML Basics", "HTML Forms", "HTML5 Elements"],
"css": ["CSS Styling", "CSS Grid", "CSS Flexbox"],
"javascript": ["JavaScript Functions", "DOM Manipulation", "Event Handling"]
};
resultsDiv.innerHTML = "";
if (query && searchData[query]) {
resultsDiv.innerHTML = "<h2>Results for: " + query.toUpperCase() + "</h2>";
searchData[query].forEach(function(item) {
resultsDiv.innerHTML += "<div class='result-item'>" + item + "</div>";
});
} else if (query) {
resultsDiv.innerHTML = "<p>No results found for: " + query + "</p>";
}
}
</script>
</body>
</html>
This example displays relevant results based on the search term entered. Try searching for "html", "css", or "javascript".
Cross-Browser Alternative
For better cross-browser compatibility, you can use the onkeypress event to detect the Enter key −
<!DOCTYPE html>
<html>
<head>
<title>Cross-Browser Search</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Cross-Browser Search Alternative</h2>
<input type="search" onkeypress="checkEnter(event)" placeholder="Press Enter to search">
<div id="output"></div>
<script>
function checkEnter(event) {
if (event.key === 'Enter') {
var searchValue = event.target.value;
document.getElementById('output').innerHTML =
"<p>Search triggered: " + searchValue + "</p>";
}
}
</script>
</body>
</html>
This approach works consistently across all modern browsers by detecting when the Enter key is pressed.
Key Points
The onsearch event is specifically for
input type="search"elementsIt triggers when the user presses Enter or clicks the clear button (×)
Browser support is limited primarily to WebKit-based browsers
For better compatibility, use
onkeypresswith Enter key detectionThe search input field automatically includes a clear button (×) in supporting browsers
Conclusion
The HTML onsearch event attribute provides a convenient way to handle search actions in WebKit browsers, but has limited cross-browser support. For production applications, consider using alternative event handling methods like onkeypress to ensure consistent behavior across all browsers and better user experience.
163 Views
