Combobox Component — fgta5js Documentation

Overview

Inheritance Notice: Class Combobox inherits all of its core state tracking, validation logic, editing mode configurations, and event handlers from the abstract base class Input.

The Combobox component manages complex option lists. It can bind to static <datalist> HTML options, or perform backend asynchronous requests (using URL endpoints) to support incremental searching, pagination, and heavy datasets.

Interactive Playground

Try interacting with the live component below and watch how the internal states change dynamically.

Live Preview

Component State

.value ""

.text ""

.InEditMode true

.getLastValue() ""

.isChanged() false

HTML Markup

Define combobox inputs using standard HTML datalist or a data-source API URL. Use fgta5-component="Combobox" to enable binding.

<form id="myform" locked="true">
  <!-- Combobox with Static Options -->
  <div class="demo-input-field" field="obj_country">
    <label for="obj_country">Country</label>
    <input id="obj_country" fgta5-component="Combobox" required>
    <datalist for="obj_country">
      <option value="ID" default="true">Indonesia</option>
      <option value="SG">Singapore</option>
    </datalist>
  </div>
</form>

Initialize and render the form in JavaScript:

const form = new $fgta5.Form('myform');
form.render()

Properties

Property	Type	Description
`value`	`String`	Gets the currently selected value ID (Read-only). To modify, use `setSelected()`.
`text`	`String`	Gets the currently selected text label (Read-only). To modify, use `setSelected()`.
`InEditMode`	`Boolean`	Gets the current edit/readonly state of the component (Read-only). To modify, use `setEditingMode()`.
`disabled`	`Boolean`	Gets or sets the component disabled state.

Methods

Method	Arguments	Description
`constructor(id)`	`(id: String)`	Creates and binds a new `Combobox` instance to the HTML element using the specified ID.
`setEditingMode(ineditmode)`	`(ineditmode: Boolean)`	Toggles editing mode. Setting to `false` locks the component as read-only and clears errors.
`suspend(doSuspend, keepState)`	`(doSuspend: Boolean, keepState: Boolean)`	Suspends or reactivates input interaction.
`isSuspended()`	`()`	Checks if the component is suspended.
`newData(initialdata)`	`(initialdata: Object \| String)`	Initializes the input with a new selection item (e.g. `{value: 'SG', text: 'Singapore'}`).
`setSelected(value, text)`	`(value: String, text: String)`	Explicitly defines the active selected option value and description text.
`clear()`	`()`	Clears the selected choice value and display.
`getLastValue()`	`()`	Returns the last committed/saved option value string.
`getLastText()`	`()`	Returns the last committed/saved option label string.
`isChanged()`	`()`	Checks if the current `value` differs from the last saved state value.
`setOptions(data)`	`(data: Array)`	Overrides the active list of static options programmatically.
`focus()`	`()`	Programmatically shifts focus onto the display field element.

HTML Attributes

Attribute	Values	Description
`required`	N/A	Marks the component as required.
`data-tabindex`	`Number`	Sets the native tabindex on the final rendered input component.