Combobox

Users can either click the widget to get a select list, or start typing to search. Unlike the standard dropdowns and selects, the combobox allows users to type in their value (rather than being restricted to selecting from the list).

If the user selects from the list, then the value is stored in a hidden input and the displayed value is updated. If the user enters something not found in the list, then the display is updated and the value is set to '0'. When processing the form data, you can check if the value is 0 - and if so, get the user supplied text (if any) from a field called {inputname}display.

Example 1

This combobox widget lets select from a dropdown list of pre-existing values. Typing into the box filters the list of options 

<x-textstem::inputs.combobox
    name="combobox"
    value="foo"
    label="My combobox"
    can_create="0"
    :options="[ 'foo', 'bar', 'baz']"
></x-textstem::inputs.combobox>
new

Example 2

This combobox widget lets users enter text or select from a drop down list of pre-existing values. In this example, we provide an associative list of options where the key is saved and the value is displayed. If the user selects from the list, then the selected ID is shown. Otherwise if they enter their own text, then a little badge saying "new" is shown. 

 <x-textstem::inputs.combobox
        name="combobox2"
        value="123"
        label="My combobox2"
        instructions=""
        can_create=1
        :options="[123 => 'foo', 124 => 'bar', 125 => 'baz']"
        useKey="1"
        required="true"
    ></x-textstem::inputs.combobox>
new --

Options

Option Description
name Input name. Note, if the combobox is configured to allow new values to be created, this will be submitted as the input name with 'display' appended
label Label for the input (optional)
value Current value (optional)
required Whether the input is required
align Align the dropdown menu. Options are top, left, right or none (default)
width Width, specified either as a numeric value (which is appended to w- to create a class name) or a pixel value
can_create If true, the user is not restricted to selecting from the dropdown list but may enter anything. The default is 0 (false)
options An array of options (see Medialight\Textstem\Helpers\OptionFormatter for formats)
usekey Whether to use keys in the options as values. Can be true, false or 'auto'. If auto, then the component will assume that if the options array is specified as an associative array, the key should be used. (default is 'auto')
showvalbadge Show the selected value as a discrete little badge. May be set to true, false or 'auto'. If set to 'auto', then the badge will be shown if the key is used with the options. (default is 'auto')
esc