`<gui-searchable-select />`

Example

Display an array of strings

PreviewSource

const el = document.createElement('div');
const select = document.createElement('gui-searchable-select')
const selectedItem = document.createElement('span')
const fruits = [
  'apple',
  'banana',
  'cherry',
  'date',
  'elderberry',
  'fig',
  'grape',
  'honeydew',
  'kiwi',
  'lemon',
  'mango',
  'nectarine',
  'orange',
  'pear',
  'quince',
  'raspberry',
  'strawberry',
  'tangerine',
  'ugli',
  'watermelon',
];
select.options = fruits.map((v,i) => ({value:i, text:v}))
select.placeholder="Search value"
select.addEventListener("searchable-select-change", (ev) => {
    const index = ev.detail
    selectedItem.innerText = `Selected: ${fruits[index]}`
})
el.appendChild(select);
el.appendChild(selectedItem)

Events

Name	Detail	Description
`searchable-select-change`	`GuiSearchableSelectChangeEventDetail`	Triggered when an option is clicked

GuiSearchableSelectChangeEventDetail

/**
 * Will contain the selected options value
 */
detail: unknown;

OptionsProp

interface SearchableOption {
  text: string;
  /** If the `value` is not defined, `text` will be used */
  value?: unknown;
  selected?: boolean;
}