Comment on page
edit-typeahead
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.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" }
];
}

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.
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. |
Optional
Default: unset
Text that is displayed if no options are available when the user opens the
edit-typeahead
cell or performs a search.Last modified 1yr ago