Autocomplete
Text input for searching values or getting suggestions
Demo
API
Tags
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
m-autocomplete |
Custom Element | None | |||||||
datalist |
Native element | <option> elements |
Attributes
Name | Value | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
source required |
String | The source of data to query for matches. This must be the id of a <datalist> element or the name of a custom source function. Learn how to create them below. |
|||||||
max |
Number | Truncates the number of results to max . Autocomplete will overflow at about 10 visible results regardless of the max set. |
Events
Name | Details | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
select |
{ // Name of the source for easy reference source: '', // Value from matches value: '', // Id of match, if provided id: '' } |
Fires after a match is selected. Try it:
|
Guidelines
Creating data sources for autocomplete
Sources can come from a standard datalist
element or a custom function added to the global MdashAutocomplete
.
1. Datalist element
Include a standard datalist element in the DOM. Its id
must match the Autocomplete's source
. The options' value attributes and optional text are searched for matches. Here's an example:
2. Custom source function
These are asynchronous functions added to the static MdashAutocomplete.sources
object. Here's another fruit
example similar to the datalist above:
const matches = cache[query] || await fetchAndCacheResults(query)
. You can also use max
if it's beneficial while searching to know the maximum number of matches that will be shown.
More Autocomplete!
Any select element with a dozen or more options could benefit from becoming an Autocomplete. It only takes one extra line of code:
Accessibility
There are no extra recommendations for Autocomplete.