HTML | DOM Datalist Object - GeeksforGeeks

24 Jan, 2022
The DOM Datalist Object is used to represent the HTML <Datalist> element. The Datalist element is accessed by getElementById().Properties: It has a ‘Option’ attribute which is used to return the collection of all options value in a datalist.Syntax:  
document.getElementById("gfg"); 
Collections 
options: It is used to return the number of options in a <datalist> element. Where “gfg” is the ID assigned to the “Datalist” Tag.Example-1:  
html
<!DOCTYPE html><html> <body>    <center>        <h1 style="color:green;font-size:39px;">          GeeksForGeeks        </h1>               <h2>DOM Datalist object</h2>       <form>        <label>Your Cars Name: </label>        <input list="gfg">        <datalist id="cars">            <option value="BMW" />            <option value="Bentley" />            <option value="Mercedes" />            <option value="Audi" />            <option value="Volkswagen" />        </datalist>    </form>       <br>    <button onclick="myGeeks()">Submit</button>     <p id="sudo"></p>        <script>        function myGeeks() {            var g =            document.getElementById("gfg").options.length;                       document.getElementById("sudo").innerHTML =              "There are " + g + " options in the list.";        }    </script></center> </body> </html>
Output:Before Clicking On Button:  
After Clicking On Button:  
Example-2:  
html
<!DOCTYPE html><html> <body>    <center>        <h1 style="color:green;font-size:39px;">          GeeksForGeeks        </h1>         <h2>DOM Datalist object</h2>         <form id="GFG">            <b><label>Your cars name:</label></b>        </form>        <br>         <button onclick="myGeeks()">Submit</button>         <script>            function myGeeks() {                var g = document.createElement("INPUT");                g.setAttribute("list", "cars");                document.getElementById("GFG").appendChild(g);                 var f = document.createElement("DATALIST");                f.setAttribute("id", "cars");                document.getElementById("GFG").appendChild(f);                 var w = document.createElement("OPTION");                w.setAttribute("value", "BMW");                document.getElementById("cars").appendChild(w);                 var x = document.createElement("OPTION");                x.setAttribute("value", "Mercedes");                document.getElementById("cars").appendChild(x);            }        </script>    </center> </body> </html>
Output:Before Clicking On Button:  
After clicking On Button:  
Supported Browsers: The browser supported by DOM Datalist Object are listed below:  
Google Chrome
Internet Explorer
Firefox
Opera
Safari
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
hritikbhatnagar2182
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript