HTML DOM Datalist অবজেক্ট

HTML DOM Datalist অবজেক্টটি HTML5 <datalist> এলিমেন্টের সাথে সম্পর্কিত।

সিনট্যাক্স

নিচে দেওয়া হলো -

Datalist অবজেক্ট তৈরি করতে -

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

Datalist অবজেক্ট অ্যাক্সেস করতে -

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

উদাহরণ

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>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে -

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"। তারপর আমরা ডেটালিস্টের ভিতরে দুটি <option> এলিমেন্ট createElement() মেথড ব্যবহার করে তৈরি করি এবং 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); }