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 autocomplete Property
The HTML DOM Input Search autocomplete property is associated with the autocomplete attribute of the <input> element with type="search". This property controls whether the browser should automatically suggest previously entered values when the user types in the search field.
Syntax
Following is the syntax for setting the autocomplete property −
searchObject.autocomplete = "on|off"
Following is the syntax for getting the autocomplete property −
var autocompleteValue = searchObject.autocomplete
Property Values
The autocomplete property accepts the following values −
on − The browser will automatically complete the user input based on previously entered values in the same field. This is the default value.
off − The browser will not provide autocomplete suggestions for this search field.
Return Value
The property returns a string representing the current autocomplete setting, either "on" or "off".
Example 1 − Toggle Autocomplete Property
Following example demonstrates how to dynamically change the autocomplete property of a search input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Search Autocomplete Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Field Autocomplete Example</h2>
<form action="#" method="get">
<label for="fruitSearch">Search Fruits:</label>
<input type="search" id="fruitSearch" name="fruits" autocomplete="on" placeholder="Type a fruit name...">
<input type="submit" value="Search">
</form>
<div style="margin-top: 20px;">
<button onclick="toggleAutocomplete()">Toggle Autocomplete</button>
<button onclick="checkStatus()">Check Status</button>
</div>
<p id="status" style="color: #333; margin-top: 10px;"></p>
<script>
function toggleAutocomplete() {
var searchField = document.getElementById("fruitSearch");
if (searchField.autocomplete === "on") {
searchField.autocomplete = "off";
document.getElementById("status").innerHTML = "Autocomplete is now OFF";
} else {
searchField.autocomplete = "on";
document.getElementById("status").innerHTML = "Autocomplete is now ON";
}
}
function checkStatus() {
var searchField = document.getElementById("fruitSearch");
var currentStatus = searchField.autocomplete;
document.getElementById("status").innerHTML = "Current autocomplete status: " + currentStatus;
}
</script>
</body>
</html>
The output shows a search field with buttons to toggle and check the autocomplete status −
Search Fruits: [apple ] [Search] [Toggle Autocomplete] [Check Status] Current autocomplete status: on
Example 2 − Multiple Search Fields
Following example shows how to manage autocomplete for multiple search fields −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Search Fields</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Product Search Form</h2>
<form>
<div style="margin-bottom: 15px;">
<label>Product Name: </label>
<input type="search" id="productName" name="product" autocomplete="on" placeholder="Enter product name">
</div>
<div style="margin-bottom: 15px;">
<label>Brand: </label>
<input type="search" id="brandName" name="brand" autocomplete="off" placeholder="Enter brand name">
</div>
<div style="margin-bottom: 15px;">
<label>Category: </label>
<input type="search" id="categoryName" name="category" autocomplete="on" placeholder="Enter category">
</div>
</form>
<button onclick="displayAllStatus()">Show All Autocomplete Status</button>
<button onclick="disableAllAutocomplete()">Disable All Autocomplete</button>
<div id="results" style="margin-top: 20px; padding: 10px; background-color: #f5f5f5;"></div>
<script>
function displayAllStatus() {
var product = document.getElementById("productName").autocomplete;
var brand = document.getElementById("brandName").autocomplete;
var category = document.getElementById("categoryName").autocomplete;
var output = "<h3>Autocomplete Status:</h3>";
output += "Product Name: " + product + "<br>";
output += "Brand: " + brand + "<br>";
output += "Category: " + category;
document.getElementById("results").innerHTML = output;
}
function disableAllAutocomplete() {
document.getElementById("productName").autocomplete = "off";
document.getElementById("brandName").autocomplete = "off";
document.getElementById("categoryName").autocomplete = "off";
document.getElementById("results").innerHTML = "<p>All autocomplete features have been disabled.</p>";
}
</script>
</body>
</html>
The output displays multiple search fields with different autocomplete settings and control buttons −
Product Name: [smartphone ] Brand: [ ] Category: [electronics ] [Show All Autocomplete Status] [Disable All Autocomplete] Autocomplete Status: Product Name: on Brand: off Category: on
How It Works
When the autocomplete property is set to "on", the browser stores the user's input in the search field and suggests matching values from the stored history when the user starts typing similar text. This feature enhances user experience by reducing repetitive typing.
When set to "off", the browser does not store or suggest any values for that specific search field, which is useful for sensitive data or when you want to prevent suggestion interference.
Browser Compatibility
The autocomplete property for search input fields is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The behavior may vary slightly between browsers in terms of suggestion formatting and storage duration.
Conclusion
The HTML DOM Input Search autocomplete property provides control over browser autocomplete behavior for search fields. Setting it to "on" enables helpful suggestions based on previous input, while "off" disables this feature for privacy or security purposes. This property can be dynamically changed using JavaScript to provide flexible user experiences.
306 Views
