AutocompleteOption
A list item representing an autocomplete suggestion.
It's unlikely that this component will be used by itself, but it is a part of the larger Autocomplete component.
Showcase
Source
<script>
const options = [
{ name: 'Test Option', details: 'Description' },
{ name: 'Another One', details: 'Different' },
{ name: 'No Description' },
];
</script>
{#each options as option}
<AutocompleteOption {option} query="tio" />
{/each}Properties #
Functional Properties
Name | Default | Type | Description |
|---|---|---|---|
option * | Object | The option object, containing a name field and, optionally, a details field, both strings. | |
query | null | string | The substring to seek out and highlight among the name and the details. |
* Required
Events #
Name | Event Detail | Description |
|---|---|---|
click | { nativeEvent } | Fired when the element is clicked. A necessary part of conforming to the AutocompleteField's interface. |
SCSS Variables #
Name | Description | Default |
|---|---|---|
$main | The background color on hover and the color of the highlight. | #4300B0 |
$font | The font of the component. | 'Ubuntu' |
$thin-font-weight | The thin font weight to differentiate the details from the name. | 300 |
$bold-font-weight | The bold font weight to emphasize the highight. | 500 |