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 DOM Input Search value property
The HTML DOM Input Search value property is associated with input elements having type="search". This property allows you to get or set the current value of a search input field, making it useful for both displaying default values and retrieving user input programmatically.
Syntax
Following is the syntax for getting the value property −
var value = searchObject.value;
Following is the syntax for setting the value property −
searchObject.value = text;
Here, text is a string representing the value to be set in the search field.
Return Value
The value property returns a string representing the current value of the search input field. If no value is entered, it returns an empty string ("").
Getting the Search Input Value
Following example demonstrates how to retrieve the value from a search input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Search Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Search Input Value</h2>
<form>
<label for="searchField">Search for fruits:</label>
<input type="search" id="searchField" name="fruits" placeholder="Enter fruit name...">
</form>
<br>
<button onclick="getValue()">Get Value</button>
<p id="result"></p>
<script>
function getValue() {
var searchInput = document.getElementById("searchField");
var value = searchInput.value;
document.getElementById("result").innerHTML = "Current value: " + (value || "(empty)");
}
</script>
</body>
</html>
The output shows the search field and retrieves its value when the button is clicked −
Get Search Input Value Search for fruits: [search input field] [Get Value] Current value: (empty) After typing "apple": Current value: apple
Setting the Search Input Value
Following example shows how to set a default or programmatic value to a search input field −
<!DOCTYPE html>
<html>
<head>
<title>Set Search Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Set Search Input Value</h2>
<form>
<label for="productSearch">Product Search:</label>
<input type="search" id="productSearch" name="product">
</form>
<br>
<button onclick="setApple()">Set "Apple"</button>
<button onclick="setBanana()">Set "Banana"</button>
<button onclick="clearField()">Clear</button>
<p id="status"></p>
<script>
function setApple() {
document.getElementById("productSearch").value = "Apple";
document.getElementById("status").innerHTML = "Value set to: Apple";
}
function setBanana() {
document.getElementById("productSearch").value = "Banana";
document.getElementById("status").innerHTML = "Value set to: Banana";
}
function clearField() {
document.getElementById("productSearch").value = "";
document.getElementById("status").innerHTML = "Field cleared";
}
</script>
</body>
</html>
The buttons programmatically change the search field value, demonstrating how to set values dynamically −
Set Search Input Value Product Search: [search input field] [Set "Apple"] [Set "Banana"] [Clear] Value set to: Apple
Real-time Value Monitoring
Following example demonstrates monitoring search input changes in real-time using event listeners −
<!DOCTYPE html>
<html>
<head>
<title>Real-time Search Monitoring</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Real-time Search Value Monitoring</h2>
<form>
<label for="liveSearch">Search:</label>
<input type="search" id="liveSearch" name="query" placeholder="Type to see live updates...">
</form>
<p>Current value: <span id="currentValue">(empty)</span></p>
<p>Character count: <span id="charCount">0</span></p>
<script>
var searchInput = document.getElementById("liveSearch");
var currentValueSpan = document.getElementById("currentValue");
var charCountSpan = document.getElementById("charCount");
searchInput.addEventListener("input", function() {
var value = searchInput.value;
currentValueSpan.textContent = value || "(empty)";
charCountSpan.textContent = value.length;
});
</script>
</body>
</html>
As you type in the search field, the current value and character count update automatically −
Real-time Search Value Monitoring Search: [search input field] Current value: (empty) Character count: 0 After typing "JavaScript": Current value: JavaScript Character count: 10
Common Use Cases
The search input value property is commonly used for −
Form validation − Checking if the search field contains valid input before submission.
Auto-suggestions − Triggering search suggestions based on the current input value.
Search history − Storing and retrieving previous search queries.
Dynamic filtering − Filtering content in real-time as the user types.
Default values − Setting pre-defined search terms programmatically.
Conclusion
The HTML DOM Input Search value property provides a simple way to get and set the value of search input fields. It returns a string representing the current field content and allows programmatic manipulation of search field values for dynamic web applications.
580 Views
