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

on-search

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:

pageJS/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:

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

pageshow-ifpagehide-if