Select Elements (อิลิเมนต์ Dropdown)

เอกสารสำหรับ SelectElementFactory และ MultiSelectElementFactory - components สำหรับ dropdown และ multi-select พร้อม type-to-filter, Ajax loading และ keyboard navigation

📋 สารบัญ

1. ภาพรวม
2. SelectElementFactory
3. MultiSelectElementFactory
4. Events
5. แนวทางปฏิบัติที่ดี

ภาพรวม

Select elements ปรับปรุง <select> elements พื้นฐานพร้อมฟีเจอร์เพิ่มเติมขณะรักษาความเข้ากันได้กับ form

คุณสมบัติหลัก

• ✅ Type-to-Filter: ข้ามไปยัง options ด้วยการพิมพ์
• ✅ Ajax Loading: โหลด options จาก API
• ✅ OptGroups: รองรับ grouped options
• ✅ Keyboard Navigation: รองรับ keyboard เต็มรูปแบบ
• ✅ i18n Support: แปลภาษา option labels อัตโนมัติ

SelectElementFactory

การใช้งานพื้นฐาน

<!-- Simple select -->
<select data-element="select" name="country">
  <option value="">เลือกประเทศ</option>
  <option value="TH">ประเทศไทย</option>
  <option value="US">สหรัฐอเมริกา</option>
  <option value="JP">ญี่ปุ่น</option>
</select>

HTML Attributes

Type-to-Filter

เมื่อ focus ที่ select ผู้ใช้สามารถพิมพ์เพื่อข้ามไปยัง options ที่ตรงกัน:

วิธีค้นหา:

โหลด Options จาก URL

<select data-element="select"
        data-url="/api/countries"
        data-value="TH"
        name="country">
  <option value="">เลือกประเทศ</option>
</select>

Expected API Response:

{
  "success": true,
  "data": [
    {"value": "TH", "text": "ประเทศไทย"},
    {"value": "US", "text": "สหรัฐอเมริกา"}
  ]
}

JavaScript API

const instance = ElementManager.getInstance(selectElement);

// รับค่าปัจจุบัน
console.log(instance.value);           // 'TH'
console.log(instance.selectedOption);  // {value: 'TH', text: 'ประเทศไทย', index: 1}

// ตั้งค่า
instance.value = 'US';

// อัพเดท options
instance.updateOptions([
  {value: '1', text: 'ตัวเลือก 1'},
  {value: '2', text: 'ตัวเลือก 2', selected: true}
]);

// โหลด options จาก URL
await instance.loadOptions('/api/cities', {country: 'TH'});

// ล้าง options (เก็บ placeholder)
instance.clearOptions();

MultiSelectElementFactory

MultiSelectElementFactory แปลง <select multiple> เป็น custom UI พร้อมปุ่ม trigger และ dropdown panel พร้อม checkboxes

การใช้งานพื้นฐาน

<select data-element="select-multiple"
        multiple
        name="categories[]">
  <option value="1">อิเล็กทรอนิกส์</option>
  <option value="2">เสื้อผ้า</option>
  <option value="3">หนังสือ</option>
  <option value="4">กีฬา</option>
</select>

UI ที่แสดง:

• ซ่อน select ต้นฉบับ
• ปุ่ม trigger แสดงรายการที่เลือก
• Dropdown panel พร้อม check/uncheck icons

HTML Attributes

รูปแบบการแสดง

JavaScript API

const instance = ElementManager.getInstance(selectElement);

// รับค่าที่เลือก
console.log(instance.getValue());  // ['1', '3']

// ตั้งค่า
instance.setValue(['1', '2', '4']);

// ล้างการเลือก
instance.clear();

// อัพเดท options
instance.updateOptions([
  {value: '1', text: 'ตัวเลือกใหม่ 1'},
  {value: '2', text: 'ตัวเลือกใหม่ 2'}
]);

เหตุการณ์

selectElement.addEventListener('change', (e) => {
  const instance = ElementManager.getInstance(e.target);
  console.log('เลือก:', instance.selectedOption);
});

แนวทางปฏิบัติที่ดี

1. ✅ ใส่ Placeholder เสมอ

<!-- ✅ ดี: บอกชัดว่าต้องทำอะไร -->
<select data-element="select" name="country">
  <option value="">เลือกประเทศ</option>
  <option value="TH">ประเทศไทย</option>
</select>

2. ✅ ใช้ data-options-key สำหรับ Modal Forms

<!-- ✅ ดี: Options โหลดจาก modal data -->
<form data-form="user-edit">
  <select data-element="select"
          data-options-key="roles"
          name="role_id">
  </select>
</form>

3. ✅ ใช้ Array Notation สำหรับ MultiSelect Names

<!-- ✅ ดี: Server ได้รับ array -->
<select data-element="select-multiple"
        multiple
        name="categories[]">
</select>
<!-- Form submission: categories[]=1&categories[]=3 -->

เอกสารที่เกี่ยวข้อง

• Form Elements ภาพรวม
• ElementFactory - Base class
• Text Elements - Text inputs พร้อม autocomplete
• FormManager - Form-level management