Typeahead Complete Component

Typeahead Complete Component

When attached to an inputText field, as a user types in the field, a list of suggestions is constructed and displayed in a popup list box attached to the field. Alternatively, as a user types, the field can be automatically completed with a suggestion (and the user can keyboard to additional suggestions. Typeahead uses AJAX requests to communicate with the server when building the list of suggestions. As a result, the page remains on display (it is not submitted/redrawn) while the list is being build. The user interface remains active while the list is being built.

Note: Typeahead support for <h:inputText> does not support DBCS (multi-byte) characters due to Web browser limitations.

Rendering

The component's visual rendering varies depending upon the component selected.

Quick Edit view

Configure this component using the Quick Edit view. To open the Quick Edit view, click

Window | Show View | Quick Edit.

The common attributes for the <hx:inputHelperTypeahead> component are listed in the table below.

Table 1. Typeahead Complete Component attributes

Attribute name

Description

value

Specifies the initial text value for the component displayed at runtime. Contains information to be displayed, in the form of a specified value or a pointer to a dynamic value.

binding

An expression that binds the component's instance (usually a user interface component) to a bean property (usually in the backing file).

id

Assigns a name to a component. Should be a unique name within a JSP.

inProgress

Attribute is not yet available.

matchWidth

If true, the suggestion drop down menu is as wide as the input field. If false, its width is determined by CSS of the drop down.

maxSuggestions

The maximum number of suggestions displayed.

rendered

Can be set to true or false:

false - Component will not be rendered to the browser at runtime.

true - Component will get rendered. This is the default value.

size

The width (in characters) of the control. The width can be more precisely specified via CSS.

startCharacters

The minimum number of characters that must be in input field before a suggestion is made.

startDelay

Number of milliseconds delay before a suggestion is made, that is, if a user types a second character within startDelay milliseconds, a suggestion is not made for the first character.

styleClass

Space-separated list of CSS style classes to be applied when this element is rendered. This value must be passed through as the class attribute on generated markup. Defines the classes (such as style sheets) of the selected component. This may be done manually, or by clicking the button and selecting the desired Classes from within the window.

type

The type of the dialog box. A modal dialog box blocks input (keyboard or mouse) to the window under the dialog ( fill out the dialog and press OK or CANCEL before you may do anything else in the page). A modeless dialog box does not block input to the window "under" the dialog.

Note: More than one modeless dialog box may be displayed at a time. If more than one modal dialog box is displayed at a time, the boxes stack on top of each other and only the top dialog is active.

oncomplete

If a request succeeds, after the content of the panel is replaced, this JavaScript™ is executed. The function has no meaningful arguments.

onerror

If provided, a JavaScript function to be executed when onblur fires and the field value fails validation. The function is executed before the action is executed. If the function returns false, the action is not run and processing of the event is halted (if the DOM halts it).

onstart

When the behavior starts executing, this JavaScript function is executed. It has no meaningful arguments. If it returns false execution is halted. This function can be used (in conjunction with oncomplete to customize what is displayed while the request is in progress.

Attribute name	Description
value	Specifies the initial text value for the component displayed at runtime. Contains information to be displayed, in the form of a specified value or a pointer to a dynamic value.
binding	An expression that binds the component's instance (usually a user interface component) to a bean property (usually in the backing file).
id	Assigns a name to a component. Should be a unique name within a JSP.
inProgress	Attribute is not yet available.
matchWidth	If true, the suggestion drop down menu is as wide as the input field. If false, its width is determined by CSS of the drop down.
maxSuggestions	The maximum number of suggestions displayed.
rendered	Can be set to true or false: false - Component will not be rendered to the browser at runtime. true - Component will get rendered. This is the default value.
size	The width (in characters) of the control. The width can be more precisely specified via CSS.
startCharacters	The minimum number of characters that must be in input field before a suggestion is made.
startDelay	Number of milliseconds delay before a suggestion is made, that is, if a user types a second character within startDelay milliseconds, a suggestion is not made for the first character.
styleClass	Space-separated list of CSS style classes to be applied when this element is rendered. This value must be passed through as the class attribute on generated markup. Defines the classes (such as style sheets) of the selected component. This may be done manually, or by clicking the button and selecting the desired Classes from within the window.
type	The type of the dialog box. A modal dialog box blocks input (keyboard or mouse) to the window under the dialog ( fill out the dialog and press OK or CANCEL before you may do anything else in the page). A modeless dialog box does not block input to the window "under" the dialog. Note: More than one modeless dialog box may be displayed at a time. If more than one modal dialog box is displayed at a time, the boxes stack on top of each other and only the top dialog is active.
oncomplete	If a request succeeds, after the content of the panel is replaced, this JavaScript™ is executed. The function has no meaningful arguments.
onerror	If provided, a JavaScript function to be executed when onblur fires and the field value fails validation. The function is executed before the action is executed. If the function returns false, the action is not run and processing of the event is halted (if the DOM halts it).
onstart	When the behavior starts executing, this JavaScript function is executed. It has no meaningful arguments. If it returns false execution is halted. This function can be used (in conjunction with oncomplete to customize what is displayed while the request is in progress.