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

name

Input name. Note, if the comboxbox 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
align

Aligh the dropdown menu. Options are:

  • top
  • left
  • right
  • none (default)
width

with specified either as

  • a numeric value  (which is appended to 'w-' to create a class name) 
  • 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 the component will assume that if the options array 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')