Combo

An input that represents an advanced select box with a set of options. It is able to provide suggestions while a user is typing text.

Combo control

Adding Combo

You can easily add a Combo control during initialization of a form:

var form = new dhx.Form("form_container", {
    rows: [
        {
            type: "combo",
            label: "count",
            labelInline: true,
            labelWidth: "50px",
            width:"200px",
            data: [
                {id: "empty", value:""},
                {id: "email", value: "email"},
                {id: "integer", value: "integer"},
                {id: "numeric", value: "numeric"},
                {id: "alphanumeric", value: "alphanumeric"},
                {id: "IPv4", value: "IPv4"}
            ]
        }  
    ]
});

Attributes

You can provide the following attributes in the configuration object of a combo:

type - (string) the type of a control, set it to "combo"
id - (string) the id of a control, auto-generated if not set
data - (array) an array of Combo options. Each option is an object with a set of key:value pairs - attributes of options and their values.
- The id attribute is returned and goes to form data. This attribute should always be fulfilled to avoid unexpected behavior
- The value attribute is displayed in the input field
value - (string/array) specifies the values that will appear in the input:
- if multiselection:true is set for a combo, the property takes an array of string values as:
  value: ["1","2","3"],
- if multiselection:false is set or the multiselection config is not defined, the property gets either of the two values: value:"1" or value: ["1"]
validation - (function) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation
parent - (string) the id of the parent control
width - (string) the width of a control
height - (string) the height of a control
css - (string) adds style classes to a control
disabled - (boolean) defines whether a control is enabled (false) or disabled (true)
label - (string) specifies a label for a control
labelWidth - (string) sets the width of the label of a control
hiddenLabel - (boolean) invisible label that will be used to identify the input on the server side
labelInline - (boolean) defines the position of a label: true - to set a label inline with a control
name - (string) the name of a control
required - (boolean) defines whether a control is required
help - (string) adds a help message to a control
preMessage - (string) a message that contains instructions for interacting with the control
successMessage - (string) a message that appears in case of successful validation of the control value
errorMessage - (string) a message that appears in case of error during validation of the control value
gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default
cellHeight - (number) sets the height of a cell in the list of options
listHeight - (number) sets the height of the list of options
label - (string) adds a label for Combo
labelInline - (boolean) defines whether a label will be placed in one line with Combo
labelWidth - (string) sets the width of a label
readonly - (boolean) makes Combo readonly (it is only possible to select options from the list, without entering words in the input)
disabled - (boolean) makes Combo disabled
template - (function) sets a template of displaying options in the popup list
customFilter - (function) sets a custom function for filtering Combo options. Check the details
multiselection - (boolean) enables selection of multiple options in Combo
placeholder - (string) sets a placeholder in the input of Combo
selectAllButton - (boolean) defines whether the Select All button should be shown
showItemsCount - (boolean|function) shows the total number of selected options
virtual - (boolean) enables dynamic loading of data on scrolling the list of options
required - (boolean) defines whether the field with Combo is required (for a form)
hiddenLabel - (boolean) adds a hidden label for a Combo input that will be used while sending a form to the server