Autocomplete
The autocomplete is a text input enhanced by a panel of suggested options.
Basic
<me-autocomplete label="Movie" options='["The Godfather","Pulp Fiction","Schindler's List"]'></me-autocomplete>
With Options
<me-autocomplete label="Country" options='["France","Germany","Spain"]'></me-autocomplete>
Controlled Value
Set value as an attribute or property to pre-select an option. Listen to me-change to track user selections. You can also drive the selection programmatically.
Set Vue
Set Angular
Clear
me-change fired with: —
<me-autocomplete id="ac" label="Framework" value="React"
options='["React","Vue","Angular","Svelte"]'></me-autocomplete>
<script>
// Listen for user selection
document.getElementById('ac').addEventListener('me-change', e => {
console.log(e.detail.value); // "Vue"
});
// Drive value programmatically
document.getElementById('ac').value = 'Vue';
</script>
Object Options
<me-autocomplete label="Film" options='[
{"label":"The Godfather","value":"godfather"},
{"label":"Pulp Fiction","value":"pulp-fiction"}
]'></me-autocomplete>
Disabled
API
| Attribute | Type | Default | Description |
|---|
options | JSON string | string[] | {label,value}[] | — | Options to display in the dropdown. |
value | string | — | Currently selected value. |
label | string | — | Floating label text. |
placeholder | string | — | Input placeholder. |
disabled | boolean | false | Disables the input. |
Events
| Event | Detail | Description |
|---|
me-change | { value: string, label: string } | Fired when the user selects an option. |
