วิธีอ้างอิงองค์ประกอบ <datalist> ที่มีตัวเลือกกำหนดไว้ล่วงหน้าสำหรับ <input> ใน HTML

ใช้แอตทริบิวต์ list สำหรับอ้างอิงองค์ประกอบ <datalist> ที่มีตัวเลือกกำหนดไว้ล่วงหน้าสำหรับองค์ประกอบ <input> ใน HTML

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ list:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Datalist Tag</title>
  </head>
  <body>
    <label for="tutorial">Select a tutorial:</label>
    <input list="tutorials" id="tutorial" name="tutorial" placeholder="Type or select...">
    <datalist id="tutorials">
      <option value="Java">
      <option value="ASP">
      <option value="PHP">
      <option value="Ruby">
      <option value="jQuery">
    </datalist>
    <p>Try to add any of the tutorial name mentioned above.</p>
  </body>
</html>

วิธีการทำงาน

• <input> มีแอตทริบิวต์ list อ้างอิงไปที่ id ของ <datalist>
• <datalist> มี <option> ต่างๆ เป็นตัวเลือก
• ผู้ใช้สามารถ พิมพ์ค้นหา หรือ เลือกจากรายการ ได้
• แตกต่างจาก <select>: ผู้ใช้พิมพ์ค่าใหม่ที่ไม่อยู่ในรายการได้ (Combobox behavior)

แอตทริบิวต์ของ <option> ใน datalist

ตัวอย่างขั้นสูง

<!-- ใช้ label แสดงข้อความที่เข้าใจง่าย แต่ส่งค่า value -->
<input list="browsers" name="browser" placeholder="Choose browser">
<datalist id="browsers">
  <option value="chrome" label="Google Chrome">
  <option value="firefox" label="Mozilla Firefox">
  <option value="safari" label="Apple Safari">
  <option value="edge" label="Microsoft Edge">
</datalist>

การจัดสไตล์ (จำกัด)

<datalist> และ dropdown ที่เปิดออกมีการจัดสไตล์ได้จำกัดมาก (ขึ้นอยู่กับ OS/เบราว์เซอร์) สำหรับ UI ที่ปรับแต่งได้เต็มที่ ควรใช้ JavaScript libraries เช่น Select2, Choices.js, หรือสร้าง Custom Combobox

Browser Support

• รองรับในเบราว์เซอร์สมัยใหม่ทุกตัว (Chrome, Firefox, Safari, Edge)
• IE10+ รองรับบางส่วน
• Mobile browsers รองรับดี