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, searchValueReturn 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