Text-based Elements (อิลิเมนต์ข้อความ)

เอกสารสำหรับ TextElementFactory, PasswordElementFactory และ SearchElementFactory - components สำหรับ text input พร้อม autocomplete, validation และฟีเจอร์พิเศษ

📋 สารบัญ

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

ภาพรวม

Text-based elements จัดการ text input พร้อมฟีเจอร์ต่างๆ เช่น autocomplete, validation และ formatting

TextElementFactory

TextElementFactory จัดการ text inputs พร้อม autocomplete และรองรับ hidden input เมื่อเปิด autocomplete จะสร้าง hidden input เพื่อเก็บค่า (key) ขณะที่แสดงข้อความ (label) ให้ผู้ใช้

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

<!-- Simple text input -->
<input type="text"
       data-element="text"
       name="username"
       placeholder="กรอก username">

<!-- Text พร้อม validation -->
<input type="text"
       data-element="text"
       data-validate="email"
       name="email"
       placeholder="กรอก email">

ฟีเจอร์ Autocomplete

Static Source (Array)

<input type="text"
       data-element="text"
       data-autocomplete="true"
       data-source='[{"value":"1","text":"กรุงเทพ"},{"value":"2","text":"เชียงใหม่"}]'
       name="city"
       placeholder="เลือกจังหวัด">

Ajax Source

<input type="text"
       data-element="text"
       data-autocomplete="true"
       data-source="/api/cities"
       data-min-length="2"
       name="city"
       placeholder="ค้นหาจังหวัด...">

Expected API Response:

{
  "success": true,
  "data": [
    {"value": "1", "text": "กรุงเทพ"},
    {"value": "2", "text": "เชียงใหม่"}
  ]
}

HTML Attributes

Built-in Validators

PasswordElementFactory

PasswordElementFactory ขยาย TextElementFactory พร้อมฟีเจอร์เฉพาะ password: strength meter, toggle visibility, criteria list และ match validation

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

<!-- Password พร้อม toggle visibility -->
<input type="password"
       data-element="password"
       name="password"
       minlength="8"
       required>

<!-- Password พร้อม strength meter -->
<input type="password"
       data-element="password"
       data-password-strength="true"
       name="password"
       required>

Password Strength Meter

<input type="password"
       data-element="password"
       data-password-strength="true"
       id="password"
       name="password">
<span id="result_password" class="comment">อย่างน้อย 8 ตัวอักษร</span>
<!-- Strength bar จะแทรกหลัง comment -->

CSS Classes บน Strength Bar:

• .weak - สีแดง (< 40% เกณฑ์ผ่าน)
• .medium - สีเหลือง (40-80% เกณฑ์ผ่าน)
• .strong - สีเขียว (> 80% เกณฑ์ผ่าน)

Password Match Validation

<!-- Password หลัก -->
<input type="password"
       data-element="password"
       id="password"
       name="password"
       required>

<!-- ยืนยัน password -->
<input type="password"
       data-element="password"
       data-target-password="password"
       name="password_confirm"
       required>

HTML Attributes

Toggle Visibility

เปิดใช้งานโดยค่าเริ่มต้น ผู้ใช้สามารถ:

• คลิกไอคอนตาเพื่อแสดง/ซ่อน password
• กด Alt + S keyboard shortcut

SearchElementFactory

SearchElementFactory ขยาย TextElementFactory พร้อมฟีเจอร์เฉพาะการค้นหา: debounced input, clear button และ results container

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

<!-- Simple search input -->
<input type="search"
       data-element="search"
       name="search"
       placeholder="ค้นหา...">

HTML Attributes

เหตุการณ์

Common Events

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

1. ✅ ใช้ Hidden Input สำหรับ Key-Value Pairs

<!-- ✅ ดี: Autocomplete เก็บ key ใน hidden input -->
<input type="text"
       data-element="text"
       data-autocomplete="true"
       data-source="/api/cities"
       name="city">

<!-- Form ส่ง: city=123 (hidden input value ไม่ใช่ display text) -->

2. ✅ ใช้ Password Strength สำหรับการลงทะเบียน

<!-- ✅ ดี: แสดง strength meter ระหว่างลงทะเบียน -->
<form data-form="register">
  <input type="password"
         data-element="password"
         data-password-strength="true"
         data-password-criteria-list="true"
         name="password">
</form>

3. ✅ Match Passwords ด้วย data-target-password

<!-- ✅ ดี: ใช้ built-in match validation -->
<input type="password" id="password" name="password">
<input type="password"
       data-target-password="password"
       name="password_confirm">

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

• Form Elements ภาพรวม
• ElementFactory - Base class
• FormManager - Form-level validation
• Number Elements - Number inputs