Đối tượng HTML DOM Datalist

Đối tượng HTML DOM Datalist liên kết với phần tử <datalist> của HTML5.

Cú pháp

Cú pháp sau đây dùng cho:

Tạo đối tượng Datalist:

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

Truy cập đối tượng Datalist:

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

Ví dụ

Hãy xem một ví dụ cho đối tượng HTML DOM Datalist:

<!DOCTYPE html> <html> <head> <title>DATALIST</title> <style> button{ margin-top:90px; } </style> </head> <body> <h2>Ví dụ đối tượng Datalist</h2> <p>Nhấn nút bên dưới để tạo phần tử datalist với các option</p> <form id="FORM1"> </form> <button onclick="createData()">TẠO</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", "xoài"); document.getElementById("fruits").appendChild(fruit1); var fruit2 = document.createElement("OPTION"); fruit2.setAttribute("value", "đu đủ"); document.getElementById("fruits").appendChild(fruit2); } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Sau khi nhấn nút TẠO:

Trong ví dụ trên:

Chúng ta đã tạo một form trống với id "FORM1" trong đó chúng ta sẽ thêm một datalist sau này bằng đối tượng datalist.

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

Chúng ta đã tạo nút TẠO sẽ thực thi hàm createData() khi được nhấp bởi người dùng.

<button onclick="createData()">TẠO</button>

Phương thức createData() trước tiên tạo một phần tử input bằng phương thức createElement() của đối tượng document và gán nó cho biến i. Sử dụng phương thức setAttribute(), chúng ta tạo thuộc tính list và gán cho nó giá trị fruits. Thuộc tính list này quan trọng vì nó liên kết hộp nhập liệu của chúng ta với datalist của chúng ta. Hộp nhập liệu sau đó được nối thêm vào form của chúng ta bằng phương thức appendChild() và cung cấp "FORM1" làm giá trị tham số.

Chúng ta sau đó tạo phần tử <datalist> và đặt id của nó thành cùng giá trị mà chúng ta cung cấp cho hộp nhập liệu, tức là "fruits". Chúng ta sau đó tạo hai phần tử <option> bên trong datalist bằng phương thức createElement() và nối các phần tử đó vào datalist bằng phương thức appendChild() và cung cấp id của datalist cho nó:

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", "xoài"); document.getElementById("fruits").appendChild(fruit1); var fruit2 = document.createElement("OPTION"); fruit2.setAttribute("value", "đu đủ"); document.getElementById("fruits").appendChild(fruit2); }