Links
Comment on page

edit-typeahead

Overview

The edit-typeahead cell type of an object-table displays a list of options in a dropdown format. An option can be selected by the user and a consequent action can fire. It includes a search field to allow users to more easily navigate the listed options. edit-typeahead is a more advanced version of edit-select in that it provides fine grained control over how options are displayed and at what stage they are available.

Basic Example

main.view.xml
<object-table ... >
<column heading="Items">
<edit-typeahead
empty-message="No results found"
on-search="$:onSearch($object, searchValue)" />
</column>
</object-table>
main.js
function onSearch(object, searchValue) {
return [
{ label: "Item 1", key: "1" },
{ label: "Item 2", key: "2" },
{ label: "Item 3", key: "3" }
];
}

Standard Attributes

Required
Default: unset
Triggered when: The cell is selected or when the user starts to search
Event parameters: $object, searchValue
Return value: See more information below.
on-search is an event that calls a JS/TS $:function or navigation. See more details:
main.view.xml
<object-table ... >
<column heading="Items">
<edit-typeahead
empty-message="No results found"
on-search="$:onSearch($object, searchValue)" />
</column>
</object-table>
main.js
function onSearch(object, searchValue) {
return [
{ label: "Item 1", key: "1" },
{ label: "Item 2", key: "2", icon: 'fa-cube' },
{ label: "Item 3", key: "3", subtext: 'Subtext for item 3' },
{ label: "Item 4", key: "4", subtext: 'Subtext for item 4', icon: 'fa-camera' },
];
}
In this above, searchValue will contain null when edit-typeahead is opened for the first time and will fire again as the user starts typing. If the user clears the text in the search box the searchValue will return to null.
The on-search function should return an array of objects with the following fields:
Field
Required?
Description
label
Required
Text that is displayed on each option
key
Required
A unique identifier for each option
icon
Optional
Places an icon on the left of each option
subtext
Optional
Subtext that is displayed on each option below the label, in a smaller font
The on-search function can also return sets of grouped items:
main.js
function onSearch(object, searchValue) {
return [
{
label: 'Group 1',
items: [
{ label: "Item 1", key: "1" },
{ label: "Item 2", key: "2" },
]
},
{
label: 'Group 2',
items: [
{ label: "Item 3", key: "3" },
{ label: "Item 4", key: "4" },
]
}
];
}
The syntax for grouped items includes the following fields:
Field
Required?
Description
label
Required
The group name that is displayed above the items in the group
items
Required
An array of item objects - see the previous table for details.

Advanced Attributes

empty-message

Optional
Type: string (static text, a format string or the return value of a JS/TS function)
Default: unset
Text that is displayed if no options are available when the user opens the edit-typeahead cell or performs a search.

show-if and hide-if

Last modified 1yr ago