birzha/modules/system/assets/ui/docs/select.md

Select

Select

Custom select control.

<select class="form-control custom-select">
    <option selected="selected" value="2">Approved</option>
    <option value="3">Deleted</option>
    <option value="1">New</option>
</select>

Sizes

Small size

<div class="form-group form-group-sm">
    <select class="form-control custom-select">
        <option value="1" selected="selected">One</option>
        <option value="2">Two</option>
    </select>
</div>

Large size

<div class="form-group form-group-lg">
    <select class="form-control custom-select">
        <option value="1" selected="selected">One</option>
        <option value="2">Two</option>
    </select>
</div>

Options

Disable search

Add the select-no-search CSS class to disable searching.

<div class="form-group">
    <select class="form-control custom-select select-no-search">
        <option value="1" selected="selected">One</option>
        <option value="2" selected="selected">Two</option>
    </select>
</div>

Option groups

Use the optgroup element to create option groups.

<select class="form-control custom-select">
    <option value="1">Please select an option</option>
    <option value="2">Ungrouped option</option>
    <optgroup label="Option Group">
        <option value="3">Grouped option</option>
        <option value="4">Another option</option>
        <option value="4">Third option</option>
    </optgroup>
</select>

AJAX search

Use the data-handler attribute to source the select options from an AJAX handler.

<select
    class="form-control custom-select"
    data-handler="onGetOptions"
    data-minimum-input-length="2"
    data-ajax--delay="300"
    data-request-data="foo: 'bar'"
></select>

The AJAX handler should return results as an array.

public function onGetOptions()
{
    $results = [
        [
            'id' => 1,
            'text' => 'Foobar',
        ],
        ...
    ];

    return ['result' => $results];
}

Due to the fact that JavaScript reorders numeric keys when interpreting the JSON data received by the AJAX handler, we suggest the method above for defining results. Support for the original results array format is however retained to ensure backwards compatibility.

public function onGetOptions()
{
    $results = [
        'key' => 'value',
        ...
    ];

    return ['result' => $results];
}