Add Custom Dropdown Lists

First get an autocompleteElement using one of the following methods:

• React / Next.js
• HTML

const autocompleteElement = client.getAutocompleteElement();

const autocompleteElement = useAutocompleteUtils();

Then, use the autocompleteElement.create() method and pass in a hotkey and list of autocomplete data.

The list of data will be shown when the hotkey is pressed.

The Autocomplete items in the list must be in the following schema:

export class AutocompleteItem {
    id!: string;
    name!: string;
    description?: string;
    icon?: { url?: string, svg?: string };
    link?: string;
}

For example:

let autocompleteData = [
    {
        id: '1',
        name: 'Name 1',
        description: 'Test Description 1'
    },
    {
        id: '2',
        name: 'Name 2',
        description: 'Test Description 2'
    },
    {
        id: '3',
        name: 'Name 3',
        description: 'Test Description 3'
    }
]

autocompleteElement.create({
	hotkey: "UNIQUE_HOTKEY", // only single spacial charater is allowed
	type: "custom",   
    list: [], // your autocomplete data here
});

When you click on an item in the Autocomplete dropdown list, a chip will be added in your Comment.

If you want to listen to click event data when a User clicks on a chip, you can use the following methods and hooks.

This works for chips from custom dropdowns as well as contact chips in the @mentions contacts dropdown.

• React / Next.js with Hooks
• React / Next.js
• HTML

let autocompleteChipData = useAutocompleteChipClick();