Text Elements

Overview

Now.js provides powerful text input elements with various features:

Demo 1: Static Autocomplete

Autocomplete from static datalist or inline options:

Code Example

            <!-- From Datalist -->
            <input type="text" name="country"
            data-element="text"
            data-autocomplete="true"
            list="country-list">
            <datalist id="country-list">
            <option value="TH" label="Thailand">Thailand</option>
            <option value="JP" label="Japan">Japan</option>
            </datalist>

            <!-- From Global Variable -->
            <input type="text" name="language"
            data-element="text"
            data-autocomplete="true"
            data-source="PROGRAMMING_LANGUAGES"
            data-min-length="1">
          

Demo 2: API Autocomplete

Load autocomplete options from API endpoint:

Code Example

            <!-- Simple API Autocomplete -->
            <input type="text" name="product"
            data-element="text"
            data-autocomplete="true"
            data-source="api/products.php"
            data-min-length="2"
            data-delay="300">

            <!-- With Custom Callback -->
            <input type="text" name="customer"
            data-element="text"
            data-autocomplete="true"
            data-source="api/customers.php"
            data-callback="renderCustomerItem">
          

API Response Format

            // Simple format (array of objects)
            {
            "success": true,
            "data": [
            {"value": "1", "text": "Product A"},
            {"value": "2", "text": "Product B"}
            ]
            }

            // Alternative formats (auto-detected)
            [{"id": "1", "name": "Product A"}] // id→value, name→text
            [{"key": "1", "label": "Product A"}] // key→value, label→text
            {"1": "Product A", "2": "Product B"} // Object format
          

Demo 3: Validated Input Types

Built-in validation for email, URL, and username:

Demo 4: Mask Input

Auto-formatting with input masks:

Mask Pattern Characters

            9 - Any digit (0-9)
            a - Any letter (a-z, A-Z)
            A - Any letter (uppercase only)
            * - Any alphanumeric
            # - Any numeric with . , -
            X - Any character
          

Demo 5: Tags Input

Multiple value selection with tags/chips:

Demo 6: Search Element

Search input with live results and clear button:

Demo 7: Hierarchical Text (Address)

Reverse search across hierarchical data (Province → District → Subdistrict):

Demo 8: Dynamic Options

Load autocomplete options dynamically via JavaScript:

JavaScript Code

            // Load options dynamically
            const options = {
            dynamicItems: [
            {value: '1', text: 'Option 1'},
            {value: '2', text: 'Option 2'},
            {value: '3', text: 'Option 3'}
            ]
            };

            // Method 1: Populate specific element
            const input = document.getElementById('dynamic_field');
            TextElementFactory.populateFromOptions(input, options, 'dynamicItems');

            // Method 2: Populate all elements in container with data-options-key
            TextElementFactory.populateFromOptionsInContainer(form, options);

            // Method 3: Update options directly on instance
            const instance = ElementManager.getInstanceByElement(input);
            TextElementFactory.updateOptions(input, options.dynamicItems);
          

API Reference

Data Attributes