Autocomplete Examples - Form Widgets

1. Simple String Array

The simplest source â€” a plain array of strings. Try typing any fruit name.

Favourite Fruit

JavaScript

FormWidgets.init('#ac1', 'Autocomplete', {
    source: ['Apple', 'Apricot', 'Banana', 'Blueberry', 'Cherry',
             'Date', 'Fig', 'Grape', 'Kiwi', 'Lemon', 'Lime',
             'Mango', 'Melon', 'Orange', 'Peach', 'Pear',
             'Pineapple', 'Plum', 'Raspberry', 'Strawberry']
});

2. Label/Value Pairs

Each item has a label (display text) and a value (stored ID). The field displays the label; data-value stores the ID.

Select Priority

Select an item to see stored label and value...

JavaScript

FormWidgets.init('#ac2', 'Autocomplete', {
    source: [
        { label: 'Critical', value: '1' },
        { label: 'High', value: '2' },
        { label: 'Medium', value: '3' },
        { label: 'Low', value: '4' },
        { label: 'None', value: '5' }
    ]
});

// Reading values after selection:
// input.value         â†’ 'High'   (label)
// input.dataset.value â†’ '2'      (ID)

3. Show Value in Dropdown (showValue)

With showValue: true, the dropdown shows the ID alongside the label. The field still stores only the label, and data-value stores only the ID.

Select Country (shows ISO code)

Select a country...

JavaScript

FormWidgets.init('#ac3', 'Autocomplete', {
    source: [
        { label: 'United Kingdom', value: 'GB' },
        { label: 'United States', value: 'US' },
        { label: 'Germany', value: 'DE' },
        { label: 'France', value: 'FR' },
        { label: 'Spain', value: 'ES' },
        { label: 'Italy', value: 'IT' }
    ],
    showValue: true,
    valueFormat: '[{value}]'
    // Dropdown: "United Kingdom [GB]"
    // Field stores: "United Kingdom"
    // data-value: "GB"
});

4. Custom Value Format

Different valueFormat templates for how the value appears in the dropdown.

Format: [ID]

Format: (Code: ID)

Format: â€” ID

JavaScript

const cities = [
    { label: 'London', value: 'LON' },
    { label: 'Manchester', value: 'MAN' },
    { label: 'Birmingham', value: 'BHX' }
];

FormWidgets.init('#ac4a', 'Autocomplete', {
    source: cities, showValue: true, valueFormat: '[{value}]'
});
FormWidgets.init('#ac4b', 'Autocomplete', {
    source: cities, showValue: true, valueFormat: '(Code: {value})'
});
FormWidgets.init('#ac4c', 'Autocomplete', {
    source: cities, showValue: true, valueFormat: 'â€” {value}'
});

5. Pair Format (l/r fields)

Using the short-hand { l: 'label', r: 'value' } format â€” auto-detected.

Select Department

JavaScript

FormWidgets.init('#ac5', 'Autocomplete', {
    source: [
        { l: 'Engineering', r: '101' },
        { l: 'Marketing', r: '102' },
        { l: 'Human Resources', r: '103' },
        { l: 'Finance', r: '104' },
        { l: 'Operations', r: '105' }
    ],
    showValue: true
});

6. Custom Field Names

Using labelField and valueField to map custom property names from your data.

Select Product

JavaScript

FormWidgets.init('#ac6', 'Autocomplete', {
    source: [
        { name: 'Widget Pro', sku: 'WP-001' },
        { name: 'Widget Lite', sku: 'WL-001' },
        { name: 'Widget Max', sku: 'WM-001' }
    ],
    labelField: 'name',
    valueField: 'sku',
    showValue: true,
    valueFormat: '(SKU: {value})'
});

7. minLength and maxResults

Requires at least 2 characters and shows up to 5 results maximum.

Search (type 2+ characters)

JavaScript

FormWidgets.init('#ac7', 'Autocomplete', {
    source: ['Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola',
             'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan',
             'Bahamas', 'Bahrain', 'Bangladesh', 'Belarus', 'Belgium',
             'Brazil', 'Canada', 'Chile', 'China', 'Colombia'],
    minLength: 2,
    maxResults: 5
});