Chrome เริ่มรองรับ datalist สำหรับ input[type=text] ใน Chrome 20 datalist ช่วยให้นักพัฒนาแอประบุค่าที่แนะนำ ในขณะเดียวกันก็ช่วยให้ผู้ใช้มีอิสระในการเขียนค่าที่กำหนดเองได้ในเวลาเดียวกัน ตั้งแต่ Chrome 23 เป็นต้นไป คุณจะใช้ datalist สำหรับ input[type=range] และ input[type=color] ได้ด้วย
input[type=range]
datalist สำหรับ input[type=range] ช่วยให้นักพัฒนาแอปแสดงตัวบ่งชี้ข้างแถบเลื่อนได้ดังที่แสดงด้านล่าง
<input type="range" value="0" min="0" max="100" list="numbers" />
<datalist id="numbers">
<option>10</option>
<option>15</option>
<option>30</option>
<option>50</option>
<option>90</option>
</datalist>
การเลื่อนหัวแม่มือบนอินพุตจะสแนปไปยังแต่ละจุด เพื่อให้ผู้ใช้ปรับเปลี่ยนค่าดังกล่าวได้อย่างง่ายดาย
input[type=color]
input[type=color] รองรับใน Chrome และ Opera อยู่แล้ว ผู้ใช้สามารถเลือกสีที่ต้องการได้โดยไม่ต้องใช้ความช่วยเหลือจากปลั๊กอิน JavaScript
การเพิ่ม datalist ลงใน input[type=color] ช่วยให้ผู้ใช้เลือกสีจากตัวอย่างสีที่นักพัฒนาแอปเลือก รวมทั้งเลือกสีได้ตามต้องการจากตัวเลือกสีด้วยตนเอง
<input type="color" value="#000000" list="colors" />
<datalist id="colors">
<option>#ff0000</option>
<option>#0000ff</option>
<option>#00ff00</option>
<option>#ffff00</option>
<option>#00ffff</option>
</datalist>
โปรดทราบว่า datalist สำหรับ input[type=color] จะยอมรับเฉพาะค่าสีฐาน 16 (เช่น #ff0000) และค่า เช่น #f00 หรือ red จะไม่ทํางาน
หากต้องการดูฟีเจอร์ใหม่เหล่านี้ในการใช้งานจริง โปรดไปที่หน้าสาธิต