ElementCreateSearchableDropdown

Callable

• ElementCreateSearchableDropdown(id, optionsList, onChange, options): SearchableDropdownElement

---

• Construct a custom searchable dropdown menu.

  The element comprises a button trigger displaying the current selection, and a popup containing a search input and a scrollable list of options. Options can optionally be grouped via the group field, which inserts a interactive header before each group of options sharing the same value.

  @example

  <div id="..." class="searchable-dropdown">
      <button class="searchable-dropdown-trigger" aria-haspopup="listbox" aria-expanded="false">
          <span class="searchable-dropdown-trigger-label">Selected label</span>
          <span class="searchable-dropdown-trigger-arrow">▾</span>
      </button>
      <div class="searchable-dropdown-popup" hidden>
          <input type="search" class="searchable-dropdown-search">
          <ul role="listbox" class="searchable-dropdown-list">
              <li role="option" data-value="..." aria-selected="true">label</li>
              ...
          </ul>
      </div>
  </div>

  ---

  Parameters

  • id: string

    The id of the root container; sub-element ids are derived from it.

  • optionsList: readonly OptionItem[]

    The available options.

  • onChange: (value) => void

    Called when the selection changes.

  • optionaloptions: CreateOptions

  Returns SearchableDropdownElement