เพิ่มรายการข้อมูลลงใน Chrome Canary แล้ว

บางครั้งการกรอกแบบฟอร์มอาจดูยุ่งยาก การให้ตัวเลือกแก่ผู้ใช้หลายรายการแต่ยังช่วยให้ผู้ใช้พิมพ์ได้อย่างอิสระเป็นสิ่งสำคัญ องค์ประกอบ 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" เป็นพารามิเตอร์การค้นหา