input.dropdown.php

<?php

$attributes = $Field->getInputAttributes(array(
    'grid-margin' => $Field->getInputMargin(),
    'grid-width' => $Field->getInputWidth(),
    'type' => 'text',
    'name' => $Field->name,
    'value' => $Field->v(),
    'placeholder' => strval($Field->placeholder) !== '' ? htmlspecialchars($Field->placeholder) : null,
    'required' => $Field->required ? '' : null,
    'readonly' => $Field->readonly ? '' : null,
    'disabled' => $Field->disabled ? '' : null,
    'class' => 'field-input field-input--' . $Field->type . ' input input--' . $Field->type . ' with-button',
    'id' => $Field->id('-input'),
    'list' => $Field->id('-list'),
    'onclick' => 'try { this.showPicker() } catch (e) { }',
));
print '<input';
foreach ($attributes as $attributeName => $attributeValue) if ($attributeValue !== null) print ' ' . $attributeName . '="' . $attributeValue . '"';
print '>';

print '<datalist id="' . $Field->id('-list') . '">';
if (is_array($Field->optionList) && !empty($Field->optionList)) {
    foreach ($Field->optionList as $option) {
        if ($option['isGroup']) {
            print "\n" . '<optgroup label="' . $Field->v($option['label']) . '">';
            foreach ($option['optionList'] as $option) {
                $optionValue = $option['value'];
                $optionLabel = $option['label'];
                print "\n" . '<option value="' . $Field->v($optionValue) . '"' . ($optionValue === $value ? ' selected=""' : '') . '>' . $Field->v($optionLabel) . '</option>';
            }
            print "\n" . '</optgroup>';
        } else {
            $optionValue = $option['value'];
            $optionLabel = $option['label'];
            print "\n" . '<option value="' . $Field->v($optionValue) . '"' . (strval($optionValue) === $value ? ' selected=""' : '') . '>' . $Field->v($optionLabel) . '</option>';
        }
    }
}
print '</datalist>';

?>

<script>
cmsRequire(['form/script/input.dropdown'], init => init(document.getElementById(<?=$Field->jId('-input')?>)));
</script>