Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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”. The autocomplete attribute takes “on” or “off” value. The on value specifies that the web browser must automatically complete user text based on previous input while false states otherwise.
Syntax
Following is the syntax for −
Setting the autocomplete Property −
searchObject.autocomplete = "on|off"
Here, on means the web browser will complete the user input automatically based on previous input while false states that it will not complete any of the user input based on previous inputs. It has the value set to on by default.
Example
Let us look at an example for the Input Search autocomplete property −
<!DOCTYPE html>
<html>
<body>
<h1>Input Search autocomplete property</h1>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br>
<input type="submit">
</form>
<p>Off the autocomplete in the above search field by clicking on the below button</p>
<button onclick="changeAuto()">Autocomplete Off</button>
<p id="Sample"></p>
<script>
function changeAuto() {
document.getElementById("SEARCH1").autocomplete = "off";
document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
}
</script>
</body>
</html>Output
This will produce the following output −
On typing some text in the above field, you can see your text autocomplete based on your previous input −
On clicking the “Autocomplete Off” button, the auto complete text won’t get captured −
In the above example −
We have first created an <input> element with type=”search”, name=”fruits” and set its autocomplete attribute to on. This ensures that the text will be complete based on our previous input. The search field is inside a form that contains a Submit button too for submitting form data to server −
<form action="/Sample_page.php"> FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br> <input type="submit"> </form>
We then create a button “Autocomplete Off” that will execute the changeAuto() method when clicked by the user −
<button onclick="changeAuto()">Autocomplete Off</button>
The changeAuto() method gets the <input> element with type “search” by using the getElementById() method and set its autocomplete attribute value to off. This means the text will not be autocompleted now and user will have to manually type complete text. We then display the message regarding this change in the paragraph with id “Sample” using its innerHTML property −
function changeAuto() {
document.getElementById("SEARCH1").autocomplete = "off";
document.getElementById("Sample").innerHTML = "Your text will not autocomplete now";
}
128 Views
