HTML DOM Input Search autocomplete Property

HTMLWeb DevelopmentFront End Technology

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 −

Live Demo

<!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";
}
raja
Published on 19-Aug-2019 12:17:18
Advertisements