<datalist /> Tag ที่ผสม <input /> และ <select />ไว้อย่างลงตัว

วันนี้เราจะขอมาพูดถึง tag <datalist /> ที่ frontend อย่างเราๆ อาจจะเคยเห็นผ่านตาจาก doc แต่อาจจะไม่ค่อยได้ใช้กันเท่าไรค่ะ

ก่อนจะไปที่ datalist เรากลับไปที่ tag input กับ select ก่อนนะคะ จะเห็นได้ว่าสองตัวนี้เป็น tag ที่ใช้กับ form การกรอกข้อมูลแทบจะทุกอันเลยทีเดียว

“ อยากกรอกข้อมูลอยู่นะ.. แต่ขี้เกียจพิมพ์จนจบอะ ” — เมื่อใช้ input

“ ข้อมูลแบบเลือกนี่ก็ดีนะ.. แต่พอต้องไถเลือกเยอะๆ แล้วก็ตาลายเหมือนกัน ”
— เมื่อใช้ select

ถึงอย่างนั้น user ก็จะพยายามกรอกข้อมูลให้จบอยู่ดีนั่นแหละ ส่วนนี้ถือว่ามีผลน้อยมากเลย แต่เมื่อมันมีคำว่า “ พยายาม ” นั่นอาจจะทำให้ user ล้มเลิกการใช้งานไปกลางคันได้นั่นเอง

เพื่อให้การกรอก form เป็นไปได้อย่างมีประสิทธิภาพมากที่สุด ตัวที่จะมาช่วยให้ง่ายขึ้นก็คือ datalist นั่นเองค่ะ

<Datalist />

รูปแบบการใช้งานจะประกาศ <input /> ที่ใส่ Attribute list เชื่อมกับ id ของ <datalist /> ค่ะ

ตัวอย่างการเขียน datalist

ตัวอย่างการแสดงผลของ Datalist

เหมือนเป็นการเอา <input /> และ <select /> มารวมกัน ข้อดีคือเราสามารถกำหนดตัวอย่างข้อมูลไว้ได้ก่อน และถ้าหากเป็นข้อมูลที่นอกเหนือจากข้อมูลตัวอย่างนั้นก็สามารถกรอกเพิ่มได้เช่นกันค่ะ คล้ายกับการกำหนด auto suggestion เลยใช่ไหมคะ แต่ว่าส่วนนี้ไม่จำเป็นต้องใช้ script เพิ่มเติมเลยค่ะ

อ้างอิงจาก : https://www.w3schools.com/tags/tag_datalist.asp

ตัวอย่าง auto suggestion ของ website sanook.com

นอกจากนี้การ suggestion ใน mobile ของ datalist ก็น่าสนใจค่ะ เรามาดูกันว่าใน browser แต่ละระบบแสดงผลยังไงกันบ้างนะคะ

datalist ใน ios

ถ้าเป็นใน ios เราจะสามารถกดที่ input เพื่อพิมพ์ข้อมูลเอง หรือจะกดที่ ▼ ก็จะแสดง native dropdown ของ ios ค่ะ

จะมี suggestion ขึ้นมาในตอนที่เราพิมพ์ข้อมูล สามารถกดเลือกได้โดยที่ไม่ต้องพิมพ์จนจบ และถ้าหากเราเลือกที่ลูกศร ก็จะแสดงผลเหมือนกับ <select /> ด้วยค่ะ เป็นการอำนวยความสะดวกให้กับ user สุดๆ และยังสามารถชี้นำให้ user เลือก option ที่มีอยู่ได้อีกด้วย

datalist ใน andriod ภาพจาก https://css-tricks.com/better-form-inputs-for-better-mobile-user-experiences/

ในส่วนการแสดงผลของ andriod ก็จะทำนองเดียวกันค่ะ แต่จะแสดง dropdown มาตอนที่กรอกข้อมูลเลยค่ะ

<datalist /> สามารถใช้ได้กับ input type อื่นๆ ที่นอกเหนือจาก text ด้วยค่ะ ไม่ว่าจะเป็น range, date หรือแม้กระทั่ง color ค่ะ

ตัวอย่างการใช้ datalist กับ input type=”range”

การแสดงผลของ type นี้จะเป็นการกำหนดระยะเป็นขีดๆ ไว้ให้สามารถเลื่อนได้เลยค่ะ

ตัวอย่างการใช้ datalist กับ input type=”color”

การแสดงผลของ type นี้จะแสดงสีที่เรากำหนดไว้ก่อน และก็ยังสามารถเลือกสีอื่นๆ ได้ที่ Other ค่ะ

ดูตัวอย่างเพิ่มเติมได้ที่ : https://demo.agektmr.com/datalist/

สำหรับ browser จะ support ก็ค่อนข้างจะมากอยู่นะคะ ส่วนเรื่องของการแสดงผลอาจจะแตกต่างกันเล็กน้อยตาม native style ของแต่ละที่ค่ะ

สามารถเช็คเพิ่มเติมได้ที่ https://caniuse.com/#feat=datalist

และนี่คือทั้งหมดของ datalist tag ที่ช่วยอำนวยความสะดวกให้ user ในการกรอก form ค่ะ