HTML DOM Datalist Object


The HTML DOM Datalist object is associated with the HTML5 <datalist> element.

Syntax

Following is the syntax −

To create Datalist object −

var p = document.createElement("DATALIST");

To access Datalist object −

var p = document.getElementById("demoDatalist");

Example

Let us look at an example for the HTML DOM Datalist object −

<!DOCTYPE html>
<html>
<head>
<title>DATALIST</title>
<style>
   button{
      margin-top:90px;
   }
</style>
</head>
<body>
<h2>Datalist object example</h2>
<p>Click the below button to create a datalist element with options</p>
<form id="FORM1">
</form>
<button onclick="createData()">CREATE</button>
<script>
   function createData() {
      var i = document.createElement("INPUT");
      i.setAttribute("list", "fruits");
      document.getElementById("FORM1").appendChild(i);
      var y = document.createElement("DATALIST");
      y.setAttribute("id", "fruits");
      document.getElementById("FORM1").appendChild(y);
      var fruit1 = document.createElement("OPTION");
      fruit1.setAttribute("value", "mango");
      document.getElementById("fruits").appendChild(fruit1);
      var fruit2 = document.createElement("OPTION");
      fruit2.setAttribute("value", "papaya");
      document.getElementById("fruits").appendChild(fruit2);
   }
</script>
</body>
</html>

Output

This will produce the following output −

After clicking on the CREATE button −

In the above example −

We have first created an empty form with id “FORM1” in which we will add a datalist later using the datalist object.

<form id="FORM1"></form>

We have created a button CREATE that will execute the createData() function on being clicked by the user.

<button onclick="createData()">CREATE</button>

The createData() method first created an input element using the createElement() method of the document object and assigns it to variable i. Using the setAttribute() method we create the list attribute and assign it the value fruits. This list attribute is important as it links our input box to our datalist. The input box is then appended to our form using the appendChild() method and supplying it “FORM1” as parameter value.

We then create the <datalist> element and set its id to the same value that we supplied to the input box ie “fruits”. We then create the two <option> elements inside the datalist using the createElement() method and appending those elements to the datalist using the appendChild() method and supplying the id of the datalist to it −

function createData() {
   var i = document.createElement("INPUT");
   i.setAttribute("list", "fruits");
   document.getElementById("FORM1").appendChild(i);
   var y = document.createElement("DATALIST");
   y.setAttribute("id", "fruits");
   document.getElementById("FORM1").appendChild(y);
   var fruit1 = document.createElement("OPTION");
   fruit1.setAttribute("value", "mango");
   document.getElementById("fruits").appendChild(fruit1);
   var fruit2 = document.createElement("OPTION");
   fruit2.setAttribute("value", "papaya");
   document.getElementById("fruits").appendChild(fruit2);
}
raja
Published on 08-Aug-2019 13:41:33
Advertisements