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:

JS/TS Events
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:

FieldRequired?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:

FieldRequired?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

show-ifhide-if

Last updated