HTML DOM Datalist ऑब्जेक्ट

HTML DOM Datalist ऑब्जेक्ट HTML5 <datalist> एलिमेंट से जुड़ा होता है।

सिंटैक्स (Syntax)

Datalist ऑब्जेक्ट बनाने के लिए:

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

Datalist ऑब्जेक्ट को एक्सेस करने के लिए:

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

उदाहरण (Example)

HTML DOM Datalist ऑब्जेक्ट का एक उदाहरण:

<!DOCTYPE html> <html> <head> <title>DATALIST</title> <style> button { margin-top: 90px; } </style> </head> <body> <h2>Datalist object example</h2> <p>ऑप्शन्स के साथ datalist एलिमेंट बनाने के लिए नीचे दिए गए बटन पर क्लिक करें</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)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

HTML DOM Datalist ऑब्जेक्ट

CREATE बटन पर क्लिक करने के बाद:

HTML DOM Datalist ऑब्जेक्ट

उपरोक्त उदाहरण में:

हमने पहले "FORM1" आईडी के साथ एक खाली फॉर्म बनाया जिसमें हम बाद में डेटालिस्ट ऑब्जेक्ट का उपयोग करके डेटालिस्ट जोड़ेंगे:

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

हमने एक CREATE बटन बनाया जो यूजर द्वारा क्लिक किए जाने पर createData() फंक्शन को एक्जीक्यूट करेगा:

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

createData() मेथड पहले डॉक्यूमेंट ऑब्जेक्ट के createElement() मेथड का उपयोग करके एक इनपुट एलिमेंट बनाता है और इसे वेरिएबल i में असाइन करता है। setAttribute() मेथड का उपयोग करके हम list एट्रिब्यूट बनाते हैं और इसे fruits वैल्यू असाइन करते हैं। यह list एट्रिब्यूट महत्वपूर्ण है क्योंकि यह हमारे इनपुट बॉक्स को हमारे डेटालिस्ट से जोड़ता है। इनपुट बॉक्स को फिर appendChild() मेथड का उपयोग करके हमारे फॉर्म में जोड़ा जाता है और पैरामीटर वैल्यू के रूप में "FORM1" सप्लाई किया जाता है।

फिर हम <datalist> एलिमेंट बनाते हैं और इसकी आईडी को वही वैल्यू सेट करते हैं जो हमने इनपुट बॉक्स को सप्लाई की थी यानी "fruits"। फिर हम createElement() मेथड का उपयोग करके डेटालिस्ट के अंदर दो <option> एलिमेंट्स बनाते हैं और appendChild() मेथड का उपयोग करके उन एलिमेंट्स को डेटालिस्ट में जोड़ते हैं और पैरामीटर के रूप में डेटालिस्ट की आईडी सप्लाई करते हैं:

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); }