AutoComplete vs DropDownList vs ComboBox vs MultiSelect

เชื่อว่าในการพัฒนาเว็บไซต์ของใครหลายๆคน คงจะต้องพบเจอกับเจ้าช่องกรอกข้อมูลทั้งสี่แบบในหัวข้อนี้อย่างแน่นอน ปัญหาก็คือ จะเลือกนำไปใช้อย่างไรให้เหมาะสมกับการใช้งานล่ะ … วันนี้เรามีข้อแนะนำในการใช้งานมาฝากกัน

มาเริ่มที่ตัวแรกกันเลยดีกว่า

AutoComplete

หน้าตาของเจ้าตัว AutoComplete โดยทั่วไปแล้วก็คือช่อง input ช่องนึงที่เราใช้กรอกข้อมูลแต่มันจะเพิ่มความพิเศษใส่ไข่มาก็ตรงที่ เจ้าตัวนี้จะมีการแสดงข้อมูลแนะนำให้กับผู้ใช้งานตามตัวอักษรหรือข้อมูลที่ผู้ใช้งานพิมพ์นั่นเอง ยกตัวอย่างเช่น เราอาจจะกรอกข้อมูลของประเทศ เมื่อพิมพ์ตัวอักษร “T” ก็จะมีชื่อประเทศที่ขึ้นต้นด้วยตัวอักษรตัวนี้ปรากฎขึ้นมาในรายการแนะนำ เช่น “ Tanzania” “ThaiLand” “Turkey” เป็นต้น ตัวอย่างการใช้งานที่เราคุ้นเคยและเห็นกันบ่อยๆเลยก็คือเว็บไซต์ Google

ตัวอย่างการใช้งาน AutoComplete

ด้วยการทำงานของตัว AutoComplete จึงทำให้ผู้พัฒนาเว็บไซต์มักใช้มันในเว็บไซต์หรือ input ที่มีการค้นหาข้อมูลเช่น เว็บไซต์ online shopping หรือใช้สำหรับค้นหาข้อมูลในเว็บไซต์นั้นๆ

DropDownList

DropDownList จะแสดงรายการข้อมูลทั้งหมดที่มีและผู้ใช้งานสามารถเลือกข้อมูลที่ต้องการใช้จากรายการนั้นๆเพียงตัวเลือกเดียว มักจะใช้ในการกรอกข้อมูลที่มีการกำหนดข้อจำกัดให้ผู้ใช้งานเลือกจากสิ่งที่มีอยู่แล้วเท่านั้น เช่น การเลือกซื้อเสื้อผ้าออนไลน์ ต้องมีการเลือกสี เลือกไซส์ ผู้พัฒนาจึงนำมาใช้งานในส่วนนี้ เป็นต้น

ตัวอย่างการใช้งาน DropDownList

ComboBox

ComboBox เป็นส่วนผสมกันระหว่าง input ที่มีลักษณะเป็น textbox (สามารถพิมพ์กรอกข้อมูลตามปกติ), autocomplete และ dropdownlist เข้าด้วยกัน พอจินตนาการแล้วหน้าตาดูน่างงขึ้นมาเลยทีเดียว แต่อย่าเพิ่งงง มันไม่ได้ยากขนาดนั้น ไปดูรูปตัวอย่างก่อนแล้วจะอ๋อเอง

ตัวอย่างการใช้งาน ComboBox

สามารถพิมพ์เพื่อให้กรองข้อมูลที่อยากเลือกได้ สามารถเลือกข้อมูลจากตัวเลือกได้ หรือจะพิมพ์เป็นข้อมูลธรรมดาโดยไม่ตามรายการแนะนำก็ได้

MultiSelect

MultiSelect ค่อนข้างมีการใช้งานที่คล้ายกับ ComboBox แต่ไฮไลต์หลักๆของ MultiSelect ก็คือการที่ผู้ใช้สามารถเลือกข้อมูลได้หลายๆข้อมูลพร้อมกัน กลายเป็นชุดข้อมูลที่ผู้ใช้ต้องการใช้งานโดยไม่ต้องเสียเวลาไปเลือกแยกทีละตัวนั่นเอง

ถึงแม้ว่าหน้าตาจะดูคล้ายกัน แต่จะเห็นว่าการใช้งานในแต่ละตัวจะมีความแตกต่างกัน เราควรเลือกใช้ให้ถูกตามวัตถุประสงค์ของการใช้งาน จะทำให้ประหยัดเวลาในการเขียนโค้ดของเราและถูกต้องตามที่ผู้ใช้งานต้องการอีกด้วย