Type Ahead

(part of package 'Bootstrap Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

TypeAhead is an input component that provides auto-complete suggestions as the user types. It leverages a value list to display options and allows selection of a suggested value.

This is a reference page; many components have detailed usage guides here.

Properties

appendToBody

Flag indicating whether the typeahead dropdown is appended to the document body. Type: Boolean Default Value: true

---

dataProviderID

Bound data provider identifier for the typeahead's value. Type: Dataprovider

---

editable

Flag indicating whether the typeahead is editable. Type: Protected Default Value: true

---

enabled

Flag indicating whether the typeahead component is enabled for user interaction. Type: Enabled Default Value: true

---

filteringDebounce

Debounce interval (in milliseconds) for filtering input in the typeahead. Type: Number Default Value: 500

---

format

Format string used to display and parse the typeahead value. Type: Format

---

placeholderText

Placeholder text displayed when no value is selected. Type: Tagstring

---

selectOnEnter

Flag indicating whether the entire text should be selected when the Enter key is pressed. Type: Boolean

---

showAs

Option typeahead options are shown as plain text or sanitized html. Type: String Default Value: "html"

---

styleClass

Set the styleclasses that should be applied at to this component Type: Styleclass Default Value: "form-control"

---

tabSeq

Tab sequence order for keyboard navigation. Type: Tabseq

---

toolTipText

Tooltip text displayed when hovering over the typeahead component. Type: Tagstring

---

valuelistConfig

Configuration options for the typeahead's value list. Type: ValuelistConfig

---

valuelistID

Identifier for the value list that provides the available options for the typeahead. Type: Valuelist Default Value: "autoVL"

---

visible

Whether the button is visible or not Type: Visible

---

Events

onActionMethodID(event)

Fired when the typeahead action is triggered (for example, when an option is selected).

Parameters:

• {JSEvent} event The event object containing details about the action event e.g. target element, selected option

---

onDataChangeMethodID(oldValue,newValue,event)

Handle changed data, return false if the value should not be accepted. JSEvent.data will contain extra information about dataproviderid, its scope and the scope id (record datasource or form/global variable scope)

Parameters:

• {${dataproviderType}} oldValue The previous value from the data provider

• {${dataproviderType}} newValue The new value to be set in the data provider

• {JSEvent} event The event object associated with the data change

Returns: {Boolean}

---

onFocusGainedMethodID(event)

Fired when the typeahead component gains focus.

Parameters:

• {JSEvent} event The event object containing details about the focus gained event e.g. target element, timestamp

---

onFocusLostMethodID(event)

Fired when the typeahead component loses focus.

Parameters:

• {JSEvent} event The event object containing details about the focus lost event e.g. target element, timestamp

---

API

requestFocus(mustExecuteOnFocusGainedMethod)

Request the focus to this typeahead.

Example:

myElement.requestFocus();

Parameters:

• {Boolean} [mustExecuteOnFocusGainedMethod] If false will not execute the onFocusGained method; the default value is true

---

---