Autocomplete

Text input for searching values or getting suggestions

Demo

API

Tag

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 Detail Description
select
An object with properties:
  • source Name of the source for easy reference
  • item Object with value set to the value from matches and id if provided (useful for finding the original item in the source data).
Fires after a match is selected. Try it:

Guidelines

Creating data sources

Sources can come from one of two places:

1. Custom source function

These are async functions added to the global MdashAutocomplete.prototype.sources object. Here's an example fruit source similar to the demo above:

Tip: If the source's data is over the network, cache results client-side for faster lookup next time the same query is given. A simple object is often good enough, e.g. 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.

2. Datalist element

Include a standard datalist element in the DOM and Autocomplete will search the option's values and text for matches. Here's an example:

More Autocomplete!

Any select with a dozen or more options could benefit from becoming an Autocomplete. It takes just one more line of code:

Accessibility

There are no extra recommendations for Autocomplete.