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 object
The HTML DOM Input Search object represents an input element with type="search" in the Document Object Model. This object provides properties and methods to manipulate search input fields dynamically through JavaScript, allowing you to create, access, and modify search functionality on web pages.
Syntax
Following is the syntax for creating an Input Search object −
var searchElement = document.createElement("INPUT");
searchElement.setAttribute("type", "search");
Following is the syntax for accessing an existing Input Search object −
var searchElement = document.getElementById("searchId");
Properties
Following are the properties for the Input Search object −
| Property | Description |
|---|---|
| autocomplete | Sets or returns the autocomplete attribute value of the search field. |
| autofocus | Sets or returns whether the search field should get focus automatically when the page loads. |
| defaultValue | Sets or returns the default value of the search field. |
| disabled | Sets or returns whether the search field is disabled or not. |
| form | Returns a reference to the form containing the search field. |
| list | Returns a reference to the datalist containing the search field. |
| maxLength | Sets or returns the maxlength attribute value of the search field. |
| name | Sets or returns the name attribute value of the search field. |
| pattern | Sets or returns the pattern attribute value for input validation. |
| placeholder | Sets or returns the placeholder text displayed in the search field. |
| readOnly | Sets or returns whether the search field is read-only or not. |
| required | Sets or returns whether the search field must be filled before form submission. |
| size | Sets or returns the size attribute value of the search field. |
| type | Returns the type of form element (read-only property, always returns "search"). |
| value | Sets or returns the current value of the search field. |
Creating an Input Search Object
You can create a new search input element dynamically using the createElement() method and setting its type attribute to "search".
Example
<!DOCTYPE html>
<html>
<head>
<title>Create Input Search Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Search Field Creation</h2>
<p>Click the button to create a search input field:</p>
<button onclick="createSearch()">Create Search Field</button>
<script>
function createSearch() {
var searchInput = document.createElement("INPUT");
searchInput.setAttribute("type", "search");
searchInput.setAttribute("placeholder", "Search fruits...");
searchInput.setAttribute("id", "fruitSearch");
searchInput.style.padding = "8px";
searchInput.style.border = "1px solid #ccc";
searchInput.style.borderRadius = "4px";
var container = document.getElementById("container");
container.innerHTML = "<label>FRUITS: </label>";
container.appendChild(searchInput);
}
</script>
</body>
</html>
The output shows a button that creates a search input field when clicked −
Dynamic Search Field Creation Click the button to create a search input field: [Create Search Field] (After clicking: FRUITS: [Search fruits...])
Accessing an Input Search Object
You can access an existing search input element using getElementById() or other DOM selection methods.
Example
<!DOCTYPE html>
<html>
<head>
<title>Access Input Search Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Input Properties</h2>
<label>Search Products: </label>
<input type="search" id="productSearch" placeholder="Enter product name" maxlength="50">
<br><br>
<button onclick="showProperties()">Show Properties</button>
<script>
function showProperties() {
var searchObj = document.getElementById("productSearch");
var output = document.getElementById("output");
output.innerHTML = "<h3>Search Input Properties:</h3>" +
"<strong>Type:</strong> " + searchObj.type + "<br>" +
"<strong>Placeholder:</strong> " + searchObj.placeholder + "<br>" +
"<strong>Max Length:</strong> " + searchObj.maxLength + "<br>" +
"<strong>Value:</strong> " + (searchObj.value || "(empty)") + "<br>" +
"<strong>Required:</strong> " + searchObj.required;
}
</script>
</body>
</html>
The output displays the search field and its properties when the button is clicked −
Search Input Properties Search Products: [Enter product name] [Show Properties] Search Input Properties: Type: search Placeholder: Enter product name Max Length: 50 Value: (empty) Required: false
Working with Search Input Methods
The Input Search object inherits standard input methods like focus(), blur(), and select() for interaction control.
Example
<!DOCTYPE html>
<html>
<head>
<title>Input Search Methods</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Input Control</h2>
<input type="search" id="mySearch" placeholder="Type something..." style="padding: 8px; margin-right: 10px;">
<br><br>
<button onclick="focusSearch()">Focus</button>
<button onclick="blurSearch()">Blur</button>
<button onclick="selectText()">Select All</button>
<button onclick="clearSearch()">Clear</button>
<script>
var searchInput = document.getElementById("mySearch");
function focusSearch() {
searchInput.focus();
}
function blurSearch() {
searchInput.blur();
}
function selectText() {
searchInput.select();
}
function clearSearch() {
searchInput.value = "";
searchInput.focus();
}
</script>
</body>
</html>
The example demonstrates various methods to control the search input field programmatically.
Common Use Cases
The Input Search object is commonly used for −
Live search functionality − Implementing real-time search as the user types.
Form validation − Checking search terms against patterns or required formats.
Search history − Storing and retrieving previous search queries.
Auto-suggestions − Providing search suggestions using datalist elements.
Conclusion
The HTML DOM Input Search object provides comprehensive control over search input elements through JavaScript. It offers properties for configuration and validation, and methods for programmatic interaction. This object is essential for creating dynamic search functionality and enhancing user experience in web applications.
177 Views
