บางครั้งการกรอกแบบฟอร์มอาจทำให้รู้สึกยุ่งยาก การให้ตัวเลือกแก่ผู้ใช้หลายตัวเลือก แต่ให้พวกเขาพิมพ์ได้อย่างอิสระจึงเป็นสิ่งสำคัญ องค์ประกอบ datalist (ที่เพิ่งเปิดตัวใน Chrome Canary (M20) ทำให้เรื่องนี้กลายเป็นเรื่องง่าย
การใช้ datalist ช่วยให้แอปของคุณกำหนดรายการผลการค้นหาที่แนะนำซึ่งผู้ใช้ควรเลือกได้ โดยจะเลือกตัวเลือกจากรายการหรือป้อนข้อความรูปแบบอิสระก็ได้
คุณจับคู่ตัวเลือกกับ datalist ได้โดยระบุ id ในแอตทริบิวต์ list ขององค์ประกอบ input ดังนี้
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist เปิดให้ใช้งานอย่างกว้างขวางใน Firefox, Opera และ Internet Explorer รุ่นล่าสุดหลังจากเวอร์ชัน 10 คุณจึงไม่ต้องกังวลเรื่องความเข้ากันได้มากเกินไป แต่หากต้องการตรวจสอบว่าใช้งานได้ในเบราว์เซอร์ต่างๆ ให้ลองทำดังนี้
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
หาก datalist พร้อมใช้งานบนเบราว์เซอร์ ระบบจะซ่อนทุกอย่างภายใต้ datalist ยกเว้นองค์ประกอบ option หากคุณใช้กลไกสำรองนี้ ให้ตรวจสอบว่าเซิร์ฟเวอร์ของคุณจับทั้ง "fruit_sel" และ "fruit" เป็นพารามิเตอร์การค้นหา