`<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;
}