เมนูแบบดรอปดาวน์ที่ค้นหาได้: ทำให้รายการยาวๆ ใช้งานง่ายขึ้น

เมนูแบบดรอปดาวน์ที่มี 200 ประเทศ รายชื่อ 50 รัฐ ตัวเลือกสินค้าหลายร้อยรายการ การเลื่อนดูรายการดรอปดาวน์ยาวๆ นั้นน่าหงุดหงิด และทำให้ผู้ใช้เลิกกรอกแบบฟอร์ม

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

ในคู่มือนี้ คุณจะได้เรียนรู้ว่าควรใช้เมนูแบบดรอปดาวน์ที่ค้นหาได้เมื่อใด และวิธีการตั้งค่าในแบบฟอร์ม WordPress ของคุณ

ปัญหาของเมนูแบบดรอปดาวน์ที่ยาวเกินไป

เมนูแบบดรอปดาวน์มาตรฐานจะใช้งานไม่ได้ผลเมื่อตัวเลือกเพิ่มมากขึ้น:

ปัญหาประสบการณ์ผู้ใช้

• การเลื่อนที่ไม่สิ้นสุด – การค้นหาคำว่า “สหรัฐอเมริกา” ในรายชื่อประเทศที่เรียงตามตัวอักษร หมายถึงการเลื่อนผ่านรายชื่อกว่า 180 ประเทศ
• ฝันร้ายบนมือถือ – พื้นที่เลื่อนขนาดเล็กบนหน้าจอสัมผัส
• ใช้เวลามาก – ผู้ใช้ใช้เวลามากกว่า 10 วินาทีในการค้นหาตัวเลือกหนึ่งตัวเลือก
• ข้อผิดพลาดง่าย – อาจเลือกรายการผิดโดยไม่ได้ตั้งใจได้ง่าย
• ที่น่าผิดหวัง – ทำซ้ำขั้นตอนนี้สำหรับช่องดรอปดาวน์หลายช่อง

เมื่อเมนูแบบดรอปดาวน์กลายเป็นปัญหา

วิธีใช้งานเมนูแบบดรอปดาวน์ที่สามารถค้นหาได้

เมนูแบบดรอปดาวน์ที่ค้นหาได้นั้น ผสานรวมช่องป้อนข้อความเข้ากับรายการแบบดรอปดาวน์:

1. ผู้ใช้คลิกที่ช่องดรอปดาวน์
2. ช่องค้นหาจะปรากฏขึ้น (หรือช่องข้อมูลนั้นจะสามารถค้นหาได้)
3. ผู้ใช้พิมพ์ตัวอักษรสองสามตัว
4. ตัวกรองตัวเลือกจะทำงานแบบเรียลไทม์เพื่อให้ตรงกับข้อมูลที่ป้อนเข้ามา
5. ผู้ใช้เลือกจากรายการที่คัดกรองแล้ว

ตัวอย่าง: การเลือกประเทศ

โดยไม่ต้องค้นหา: เลื่อนดูรายชื่อกว่า 200 ประเทศเพื่อหา “เยอรมนี”

ด้วยการค้นหา: พิมพ์ “ger” → ดูข้อมูล เยอรมนี, แอลจีเรีย, ไนจีเรีย → คลิก เยอรมนี

ประหยัดเวลา: 10+ วินาที → 2 วินาที

ตัวอย่างการใช้งานทั่วไปสำหรับเมนูแบบดรอปดาวน์ที่ค้นหาได้

การเลือกประเทศ

ตัวอย่างคลาสสิก ด้วยจำนวนประเทศมากกว่า 195 ประเทศ การค้นหาจึงเป็นสิ่งจำเป็น:

• พิมพ์ “uni” → สหรัฐอเมริกา สหราชอาณาจักร สหรัฐอาหรับเอมิเรตส์
• พิมพ์ “aus” → ออสเตรเลีย, ออสเตรีย
• พิมพ์ “ใหม่” → นิวซีแลนด์, นิวแคลิโดเนีย

การคัดเลือกของรัฐ/จังหวัด

50 รัฐของสหรัฐอเมริกา 13 จังหวัดของแคนาดา หรือภูมิภาคทั่วโลก:

• พิมพ์ “cal” → แคลิฟอร์เนีย
• พิมพ์ “ใหม่” → นิวยอร์ก, นิวเจอร์ซีย์, นิวแฮมป์เชียร์, นิวเม็กซิโก

หมวดหมู่สินค้า

เว็บไซต์อีคอมเมิร์ซที่มีสินค้าให้เลือกหลายร้อยประเภท:

• พิมพ์ “แล็ปท็อป” → แล็ปท็อป, อุปกรณ์เสริมแล็ปท็อป, กระเป๋าแล็ปท็อป
• พิมพ์ “โทรศัพท์” → โทรศัพท์, เคสโทรศัพท์, ที่ชาร์จโทรศัพท์

ตำแหน่งงาน/อุตสาหกรรม

แบบฟอร์มสมัครงานที่มีรายชื่อตำแหน่งงานมากมาย:

• พิมพ์คำว่า “engineer” → วิศวกรซอฟต์แวร์, วิศวกรโยธา, วิศวกรเครื่องกล
• พิมพ์คำว่า “ตลาด” → ผู้จัดการฝ่ายการตลาด, นักวิเคราะห์ตลาด, ผู้เชี่ยวชาญด้านตลาดออนไลน์

ภาษา

สามารถตั้งค่าภาษาได้มากกว่า 100 ภาษา:

• พิมพ์ “span” → ภาษาสเปน
• พิมพ์ “chin” → ภาษาจีน (ตัวย่อ), ภาษาจีน (ตัวเต็ม)

มหาวิทยาลัย/โรงเรียน

รายชื่อสถาบันการศึกษา:

• พิมพ์ “harvard” → มหาวิทยาลัยฮาร์วาร์ด
• พิมพ์ “MIT” → สถาบันเทคโนโลยีแมสซาชูเซตส์

โซนเวลา

ตัวเลือกเขตเวลามากกว่า 400 แห่ง:

• พิมพ์คำว่า “pacific” → Pacific/Auckland, Pacific/Honolulu, US/Pacific
• พิมพ์ “นิวยอร์ก” → America/New_York

การตั้งค่าเมนูดรอปดาวน์ที่สามารถค้นหาได้

ต่อไปนี้คือวิธีการสร้างเมนูแบบดรอปดาวน์ที่สามารถค้นหาได้ เครื่องมือสร้างแบบฟอร์มอัตโนมัติ:

ขั้นตอนที่ 1: ติดตั้ง Auto Form Builder

1. ไปที่ ปลั๊กอิน→เพิ่มใหม่
2. ค้นหา "เอเอฟบี“(ชื่อย่อของ Auto Form Builder)”
3. ค้นหา "AFB – โปรแกรมสร้างแบบฟอร์มอัตโนมัติ – โปรแกรมสร้างแบบฟอร์มแบบลากและวาง"
4. คลิก ติดตั้งตอนนี้แล้ว กระตุ้น

ขั้นตอนที่ 2: เพิ่มช่องข้อมูลแบบดรอปดาวน์

1. สร้างหรือแก้ไขแบบฟอร์มของคุณ
2. ลาก หล่นลง กรอกข้อมูลลงในแบบฟอร์มของคุณ
3. คลิกเพื่อเปิดการตั้งค่า

ขั้นตอนที่ 3: เพิ่มตัวเลือกของคุณ

ป้อนรายการตัวเลือกของคุณ สำหรับรายการยาวๆ คุณสามารถทำได้ดังนี้:

• พิมพ์ด้วยตนเอง – กรอกแต่ละตัวเลือกทีละตัว
• เพิ่มจำนวนมาก – วางรายการตัวเลือก (หนึ่งตัวเลือกต่อบรรทัด)

ขั้นตอนที่ 4: เปิดใช้งานการค้นหา

ในเมนูแบบดรอปดาวน์ ให้มองหา สามารถค้นหาได้ or เปิดใช้งานการค้นหา ตัวเลือก เปิดใช้งาน

ตอนนี้เมนูแบบดรอปดาวน์จะมีช่องค้นหา/ตัวกรองที่ช่วยกรองตัวเลือกต่างๆ ขณะที่ผู้ใช้พิมพ์

ขั้นตอนที่ 5: กำหนดค่าพฤติกรรมการค้นหา

ขึ้นอยู่กับโปรแกรมสร้างแบบฟอร์มที่คุณใช้ คุณอาจมีตัวเลือกดังต่อไปนี้:

• อักขระขั้นต่ำ – เริ่มการกรองหลังจากพิมพ์อักขระ X ตัว
• ค้นหาตำแหน่งงาน – จับคู่จากตัวเลือกเริ่มต้นหรือที่ใดก็ได้
• ข้อความตัวอย่าง – “พิมพ์เพื่อค้นหา…” หรือ “ค้นหาประเทศ…”

แนวทางปฏิบัติที่ดีที่สุดสำหรับฟิลด์แบบดรอปดาวน์

1. เปิดใช้งานการค้นหาเสมอสำหรับตัวเลือกมากกว่า 20 รายการ

หากเมนูแบบดรอปดาวน์ของคุณมีตัวเลือกมากกว่า 20 รายการ ให้เปิดใช้งานการค้นหา แค่นั้นเอง ผู้ใช้จะขอบคุณคุณแน่นอน

2. ใช้ข้อความตัวอย่างที่ชัดเจน

แจ้งให้ผู้ใช้ทราบว่าพวกเขาสามารถค้นหาได้:

• “เลือกประเทศ (พิมพ์เพื่อค้นหา)”
• “เลือกจังหวัดของคุณ…”
• “ค้นหาหรือเลือก…”

3. จัดเรียงตัวเลือกตามลำดับตรรกะ

แม้จะใช้ฟังก์ชันค้นหา ลำดับของตัวเลือกก็ยังมีความสำคัญ:

• ตามตัวอักษร – เหมาะที่สุดสำหรับชื่อ (ประเทศ รัฐ)
• อันดับแรกที่พบได้บ่อยที่สุด – จัดเรียงตัวเลือกยอดนิยมไว้ด้านบน (สหรัฐอเมริกา สหราชอาณาจักร แคนาดา)
• จัดกลุ่ม – หมวดหมู่ที่มีตัวคั่น

4. รวมรูปแบบที่พบได้ทั่วไป

ผู้ใช้อาจค้นหา:

• “USA” หรือ “United States” หรือ “US” หรือ “America”
• “UK” หรือ “สหราชอาณาจักร” หรือ “บริเตน” หรือ “อังกฤษ”

ถ้าเป็นไปได้ โปรดระบุคำย่อหรือคำที่ใช้กันทั่วไปซึ่งมีความหมายตรงกับตัวเลือกเดียวกัน

5. ทดสอบบนมือถือ

เมนูแบบดรอปดาวน์ที่สามารถค้นหาได้ควรใช้งานได้อย่างราบรื่นบนอุปกรณ์สัมผัส:

• ช่องค้นหาสามารถแตะได้ง่าย
• แป้นพิมพ์จะปรากฏขึ้นเพื่อให้พิมพ์ได้
• ตัวเลือกมีขนาดใหญ่พอที่จะแตะได้อย่างแม่นยำ

เมื่อใดที่ไม่ควรใช้เมนูแบบดรอปดาวน์ที่ค้นหาได้

เมนูแบบดรอปดาวน์ที่ค้นหาได้นั้นไม่ใช่คำตอบเสมอไป:

รายชื่อตัวเลือกที่ผ่านการคัดกรอง (ไม่เกิน 10 ตัวเลือก)

สำหรับตัวเลือก 5-10 รายการ การใช้เมนูแบบดรอปดาวน์มาตรฐานจะเร็วกว่า ไม่จำเป็นต้องพิมพ์เมื่อคุณสามารถเห็นทุกอย่างได้พร้อมกัน

เมื่อผู้ใช้ไม่ทราบคำศัพท์ที่ถูกต้อง

การค้นหาจำเป็นต้องให้ผู้ใช้รู้ว่าจะพิมพ์อะไร หากพวกเขากำลังเรียกดู/สำรวจตัวเลือกต่างๆ รายการแบบจัดหมวดหมู่หรือปุ่มตัวเลือกอาจใช้งานได้ดีกว่า

ตัวเลือกใช่/ไม่ใช่ หรือตัวเลือกไบนารี

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

ช่วงตัวเลข

สำหรับการเลือกช่วงอายุหรือจำนวน โปรดพิจารณา:

• ช่องป้อนตัวเลข
• เลื่อน
• เมนูแบบเลื่อนลงสั้น (1-10)

ทางเลือกอื่นนอกเหนือจากเมนูแบบดรอปดาวน์ที่ค้นหาได้

ขึ้นอยู่กับข้อมูลของคุณ โปรดพิจารณาทางเลือกเหล่านี้:

ช่องข้อความเติมอัตโนมัติ

ผู้ใช้สามารถพิมพ์ได้อย่างอิสระ และคำแนะนำจะปรากฏด้านล่าง เหมาะอย่างยิ่งเมื่อผู้ใช้ป้อนค่าที่ไม่อยู่ในรายการของคุณ

เมนูแบบดรอปดาวน์เรียงซ้อน

แบ่งรายการยาวๆ หนึ่งรายการออกเป็นสองรายการสั้นๆ:

• เมนูแบบเลื่อนลงแรก: เลือกทวีป
• เมนูแบบเลื่อนลงที่สอง: เลือกประเทศ (กรองตามทวีป)

ปุ่มตัวเลือกวิทยุที่มีคำว่า “อื่นๆ”

แสดงตัวเลือก 5-7 อันดับแรกในรูปแบบปุ่มวิทยุ พร้อมตัวเลือก "อื่นๆ" ซึ่งจะแสดงช่องป้อนข้อความ

ตัวเลือกที่จัดกลุ่ม/จัดหมวดหมู่

ใช้ optgroups เพื่อจัดระเบียบตัวเลือกตามหมวดหมู่:

• อเมริกาเหนือ
  • แคนาดา
  • เม็กซิโก
  • ประเทศสหรัฐอเมริกา
• ยุโรป
  • ฝรั่งเศส
  • ประเทศเยอรมัน
  • สหราชอาณาจักร

รายการตัวเลือกที่สร้างไว้ล่วงหน้า

อย่าเสียเวลาคิดค้นสิ่งใหม่ๆ ในเมื่อของที่มีอยู่แล้วก็มีอยู่แล้ว นี่คือรายการสิ่งของพื้นฐานที่คุณจำเป็นต้องใช้:

ประเทศ

ประเทศสมาชิกสหประชาชาติ 195 ประเทศ รวมทั้งดินแดนต่างๆ ควรพิจารณาจัดเรียงประเทศที่มีสมาชิกร่วมกัน (สหรัฐอเมริกา สหราชอาณาจักร แคนาดา ออสเตรเลีย) ไว้ด้านบนสุด จากนั้นเรียงตามลำดับตัวอักษร

สหรัฐอเมริกา

50 รัฐ รวมทั้งเขตปกครองพิเศษดีซีและดินแดนต่างๆ การเรียงตามตัวอักษรใช้ได้ดี

จังหวัดของแคนาดา

13 จังหวัดและดินแดน สั้นพอที่จะเลือกค้นหาได้หรือไม่ก็ได้

โซนเวลา

ใช้ตัวระบุเขตเวลามาตรฐาน (America/New_York, Europe/London) จัดกลุ่มตามภูมิภาค

ภาษา

รหัสภาษา ISO พร้อมชื่อที่แสดง โดยเรียงลำดับภาษาที่ใช้บ่อยที่สุดไว้ก่อน

อุตสาหกรรม

รายการจำแนกประเภทอุตสาหกรรมมาตรฐาน (NAICS, SIC) หรือรายการที่กำหนดเองสำหรับกลุ่มเป้าหมายของคุณ

ข้อควรพิจารณาด้านประสิทธิภาพ

รายการขนาดใหญ่มาก (มีตัวเลือกมากกว่า 1000 รายการ)

สำหรับรายการที่มีขนาดใหญ่มาก:

• ตัวเลือกการโหลดตามความต้องการ – ดึงข้อมูลจากเซิร์ฟเวอร์ขณะที่ผู้ใช้พิมพ์
• กำหนดจำนวนอักขระขั้นต่ำ – ต้องระบุอักขระ 2-3 ตัวก่อนจึงจะค้นหาได้
• แสดงผลลัพธ์ที่จำกัด – แสดงผลการแข่งขัน 20 อันดับแรก ไม่ใช่ทั้งหมด 500 รายการ

ผลกระทบจากการโหลดหน้าเว็บ

รายการตัวเลือกที่ยาวจะทำให้ขนาดหน้าเว็บใหญ่ขึ้น สำหรับรายการที่มีมากกว่า 500 ตัวเลือก ควรพิจารณา:

• ตัวเลือกการโหลดผ่าน AJAX
• การแบ่งย่อยเป็นเมนูแบบดรอปดาวน์แบบเรียงลำดับ
• การใช้การค้นหาฝั่งเซิร์ฟเวอร์

การเข้าถึง

ตรวจสอบให้แน่ใจว่าสามารถเข้าถึงเมนูแบบดรอปดาวน์ที่สามารถค้นหาได้:

การนำทางแป้นพิมพ์

• กด Tab เพื่อโฟกัสช่องข้อมูล
• พิมพ์เพื่อค้นหา
• ใช้ปุ่มลูกศรเพื่อเลื่อนดูตัวเลือกต่างๆ
• ป้อนเพื่อเลือก
• หลบหนีเพื่อปิด

โปรแกรมอ่านหน้าจอ

• ป้ายกำกับ ARIA ที่ถูกต้อง
• ประกาศจำนวนผลลัพธ์
• ประกาศตัวเลือกที่เลือก

ตัวบ่งชี้ภาพ

• รัฐที่มีจุดสนใจชัดเจน
• ตัวเลือกปัจจุบันที่ถูกเน้น
• ตัวแสดงสถานะการโหลดขณะค้นหา

คำถามที่พบบ่อย

มีตัวเลือกกี่แบบก่อนที่ฉันจะต้องเริ่มค้นหา?

เปิดใช้งานการค้นหาสำหรับเมนูแบบดรอปดาวน์ที่มีตัวเลือกมากกว่า 20 รายการ สำหรับตัวเลือกมากกว่า 50 รายการ การค้นหาเป็นสิ่งจำเป็น ผู้ใช้บางรายชื่นชอบการค้นหาแม้จะมีตัวเลือกเพียง 10-15 รายการก็ตาม

ควรเริ่มการค้นหาตั้งแต่ต้นหรือจากจุดใดก็ได้?

การค้นหาแบบ "ทุกที่" นั้นยืดหยุ่นกว่า เช่น การค้นหา "york" จะได้ผลลัพธ์เป็น "New York" ส่วนการค้นหาแบบค้นหาเฉพาะส่วนต้นคำนั้นจะเร็วกว่าสำหรับคำที่รู้จักอยู่แล้ว

ผู้ใช้ยังสามารถเลื่อนดูตัวเลือกทั้งหมดได้หรือไม่?

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

ถ้าผู้ใช้พิมพ์คำค้นหาผิดล่ะ?

การค้นหาพื้นฐานไม่สามารถจัดการกับคำพิมพ์ผิดได้ สำหรับฟิลด์ที่สำคัญ (เช่น ประเทศ) โปรดตรวจสอบให้แน่ใจว่าได้ครอบคลุมคำสะกดผิดที่พบบ่อย หรือใช้การค้นหาแบบคลุมเครือ (fuzzy matching) หากมีให้เลือกใช้

เมนูแบบดรอปดาวน์ที่สามารถค้นหาได้ใช้งานได้บนมือถือหรือไม่?

ใช่ และโดยทั่วไปแล้วเมนูแบบดรอปดาวน์จะใช้งานได้ดีกว่าบนมือถือ เพราะการพิมพ์เร็วกว่าการเลื่อนดูรายการยาวๆ ที่มีพื้นที่เลื่อนเล็กๆ

สรุป

ทำให้รายการดรอปดาวน์ที่มีความยาวใช้งานง่ายขึ้น:

1. ระบุรายการยาวๆ – เมนูแบบดรอปดาวน์ที่มีตัวเลือกมากกว่า 20 รายการ
2. เปิดใช้การค้นหา – อนุญาตให้ผู้ใช้พิมพ์เพื่อกรองข้อมูล
3. ใช้ตัวยึดตำแหน่งที่ชัดเจน – “พิมพ์เพื่อค้นหา…”
4. เรียงลำดับอย่างมีเหตุผล – เรียงลำดับตามสินค้าที่ได้รับความนิยมก่อน แล้วจึงเรียงตามตัวอักษร
5. ทดสอบบนมือถือ – รับประกันประสบการณ์การใช้งานที่ราบรื่น
6. พิจารณาทางเลือกอื่น – เมนูแบบดรอปดาวน์เรียงลำดับ และตัวเลือกที่จัดกลุ่มไว้

สรุป

รายการแบบดรอปดาวน์ที่ยาวเกินไปทำให้อัตราการกรอกแบบฟอร์มเสร็จสมบูรณ์ลดลง เมนูแบบดรอปดาวน์ที่ค้นหาได้ พลิกโฉมประสบการณ์การใช้งาน—ผู้ใช้สามารถค้นหาตัวเลือกที่ต้องการได้ในเวลาเพียงไม่กี่วินาที แทนที่จะต้องเลื่อนดูไปเรื่อยๆ อย่างไม่มีที่สิ้นสุด

ไม่ว่าจะเป็นประเทศ รัฐ ผลิตภัณฑ์ หรือรายการใดๆ ที่มีตัวเลือกมากกว่า 20 รายการ การเพิ่มฟังก์ชันการค้นหาจะทำให้แบบฟอร์มของคุณเร็วขึ้นและใช้งานง่ายขึ้น

เครื่องมือสร้างแบบฟอร์มอัตโนมัติ ช่วยให้คุณสร้างช่องดรอปดาวน์ที่มีฟังก์ชันการค้นหา ช่วยให้ผู้ใช้ค้นหาสิ่งที่ต้องการได้อย่างรวดเร็วแม้ในรายการที่ยาวที่สุด

พร้อมที่จะปรับปรุงแบบฟอร์มของคุณแล้วหรือยัง? ดาวน์โหลดโปรแกรมสร้างแบบฟอร์มอัตโนมัติ และทำให้รายการแบบดรอปดาวน์ของคุณใช้งานง่ายขึ้นในวันนี้