Hierarchical Address

Thai address autocomplete with cascading selection (Province → District → Subdistrict)

Features Overview

HierarchicalTextFactory provides a powerful cascading address selection system for Thai addresses:

🔗 Cascading Selection

Select Province first, then District options update automatically

data-hierarchy="province"

🔍 Reverse Search

Type subdistrict name to auto-fill province and district

Smart auto-completion

📦 Data Loading

Load address data from URL or global variable

data-source="address.json"

⌨️ Keyboard Support

Full keyboard navigation with arrow keys

Arrow keys, Enter, Escape

📱 Mobile Friendly

Touch-friendly dropdown with smooth scrolling

Responsive design

🏷️ Hidden Values

Store address codes in hidden inputs for form submission

name="province" → hidden input

API Reference

HierarchicalTextFactory attributes:

Attribute Type Values Description
data-hierarchy string province, district, subdistrict Required. Defines the level in hierarchy
data-source string URL or variable name Data source (only needed on first field)
name string - Form field name (creates hidden input)
placeholder string - Placeholder text
required boolean - Make field required

Data Format

The hierarchical data should be structured as nested objects:


            {
            "กรุงเทพมหานคร": {
            "เขตพระนคร": {
            "100101": "แขวงพระบรมมหาราชวัง",
            "100102": "แขวงวังบูรพาภิรมย์",
            "100103": "แขวงวัดราชบพิธ"
            },
            "เขตดุสิต": {
            "100201": "แขวงดุสิต",
            "100202": "แขวงวชิรพยาบาล"
            }
            },
            "นนทบุรี": {
            "อำเภอเมืองนนทบุรี": {
            "120101": "ตำบลสวนใหญ่",
            "120102": "ตำบลตลาดขวัญ"
            }
            }
            }

Code Examples

Example 1: Basic Usage

Three connected input fields for Thai address (form must have data-form attribute):


            <form data-form="myForm" data-validate="false" data-csrf="false">
            <!-- Province (first level - includes data source) -->
            <input type="text" name="province"
            data-hierarchy="province"
            data-source="address.json"
            placeholder="จังหวัด"
            autocomplete="off">

            <!-- District (second level) -->
            <input type="text" name="district"
            data-hierarchy="district"
            placeholder="อำเภอ/เขต"
            autocomplete="off">

            <!-- Subdistrict (third level) -->
            <input type="text" name="subdistrict"
            data-hierarchy="subdistrict"
            placeholder="ตำบล/แขวง"
            autocomplete="off">
            </form>

Example 2: With Form Submission

Complete form with AJAX submission:


            <form data-form="addressForm"
            data-validate="true"
            data-csrf="false"
            data-ajax-submit="true"
            action="save-address.php">
            <div class="form-group">
            <label>Province</label>
            <input type="text" name="province" required
            data-hierarchy="province"
            data-source="address.json"
            placeholder="Select province..."
            autocomplete="off">
            </div>

            <div class="form-group">
            <label>District</label>
            <input type="text" name="district" required
            data-hierarchy="district"
            placeholder="Select district..."
            autocomplete="off">
            </div>

            <div class="form-group">
            <label>Subdistrict</label>
            <input type="text" name="subdistrict" required
            data-hierarchy="subdistrict"
            placeholder="Select subdistrict..."
            autocomplete="off">
            </div>

            <button type="submit">Submit</button>
            </form>

Example 3: Loading from Global Variable

Use pre-loaded data from a global variable:


            <script>
            // Pre-load address data
            window.thaiAddressData = {
            "กรุงเทพมหานคร": {
            "เขตพระนคร": {
            "100101": "แขวงพระบรมมหาราชวัง"
            }
            }
            };
            </script>

            <form data-form="myForm" data-csrf="false">
            <input type="text" name="province"
            data-hierarchy="province"
            data-source="thaiAddressData"
            placeholder="จังหวัด"
            autocomplete="off">
            </form>

Live Demo

Try the hierarchical address selection:

Demo 1: Thai Address Selection

Select province first, then district options will update. You can also type in the subdistrict field to search and auto-fill all fields.

Select Address
Click or type to search provinces
Select province first
Type here to reverse search!

How It Works

1

Form Enhancement

FormManager enhances all forms with data-form attribute and registers inputs with ElementManager.

2

Register Hierarchical Inputs

Inputs with data-hierarchy attribute are automatically registered with HierarchicalTextFactory, grouped by form.

3

Load Data

Data is loaded from data-source (URL or global variable) on the first hierarchical input. Data is shared across all groups.

4

Cascading Updates

When a selection is made, lower level fields are cleared. On focus, relevant options are populated based on parent selections.

5

Reverse Search

Typing in the subdistrict field (without province/district selected) searches all levels and auto-fills when a unique match is found.

Keyboard Navigation

Full keyboard support for accessibility:

Key Action
↓ Arrow Down Move to next option in dropdown
↑ Arrow Up Move to previous option in dropdown
Enter Select highlighted option
Escape Close dropdown
Tab Move to next field (closes dropdown)