<baht-typeahead>

Text input with suggestions. The text is the value; pick a suggestion and the input shows its label. Static options filtered client-side (prefix matches first) or an async fetcher(term); typing is debounced.

Static options

free-text="false" makes the text a filter only — blur reverts to the last pick.

<baht-typeahead label="Country" placeholder="Start typing…"></baht-typeahead>

<script>
  const el = document.querySelector('baht-typeahead');
  el.options = [
  { key: 'th', label: 'Thailand' },
  { key: 'tw', label: 'Taiwan' },
  { key: 'nl', label: 'Netherlands', sub: 'EU' },
  ];
  el.addEventListener('baht-change', (e) => console.log(e.detail)); // { value, option }
  el.addEventListener('baht-select', (e) => console.log(e.detail.option.key));
</script>

Async fetcher

<baht-typeahead label="City" min-chars="2"></baht-typeahead>

<script>
  const el = document.querySelector('baht-typeahead');
  el.fetcher = (term) => api.searchCities(term); // Promise<{ key, label, sub? }[]>
</script>

Props

Name	Type	Default	Description
`label`	`string`	`'Search'`	Accessible name
`value`	`string`	`''`	The text (controlled)
`placeholder`	`string`	`''`	Input placeholder
`disabled`	`boolean`	`false`	Disabled
`invalid`	`boolean`	`false`	Error styling
`options`JS	`TypeaheadOption[]`	`[]`	Static suggestions { key, label, sub? }, filtered here
`fetcher`JS	`((term: string) => Promise<TypeaheadOption[]>) \| null`	`null`	Async suggestions; overrides options
`debounce`	`number`	`150`	Quiet ms before emit/fetch
`min-chars`	`number`	`1`	Chars before suggesting
`max-items`	`number`	`8`	Suggestions shown
`free-text`	`boolean`	`true`	false = only picked options count; blur reverts
`autocomplete`	`string`	`'off'`	HTML autocomplete token forwarded to the input ('off' keeps the browser's own list away).

Events

Event	detail	Description
`name`	CustomEvent
`baht-change`	`{ value, option }`	Text changed (debounced) or a suggestion picked (option set)
`baht-select`	`{ option }`	A suggestion was picked