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

NeeMeOn
NeeMeOn
May 28, 2020 · 2 min read

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

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

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

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

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

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

<Datalist />

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

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

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

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

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

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

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

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

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

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

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

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

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

Tencent (Thailand)

The Official Tencent (Thailand) Blog

Tencent (Thailand)

The Official Tencent (Thailand) Blog

NeeMeOn

Written by

NeeMeOn

Lead Front End Developer @Tencent (Thailand)

Tencent (Thailand)

The Official Tencent (Thailand) Blog