Vivid API

Searchable Select

Searchable Select allows users to select one or multiple items from a list of options. It provides a search input field to filter the options.

Country Select

In a Form

Asynchronous Option Loading

To fetch options for the search text asynchronously you will need combine several features:

Use searchText and the search-text-change event to fetch options for the search text. Set loading while options are being fetched.

Use the no-options slot to indicate that options will become available when the user starts typing.

As you are now handling the filtering of options yourself, you need to disable the built-in filtering logic:

  • Set optionFilter to always return true to show all options.
  • Set matchedText on the options to the search text they were fetched with.

Already selected options need to stay present, even if they are no longer in the current result set. Use hidden to hide them in the dropdown.