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 the name of the source for easy reference
  • item the item selected from matches. Item will be the whole object as returned by the source.
Fired after a match was selected by the user.

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 data list element in the DOM and autocomplete will search the option's values for matches. Here's an example:

Accessibility

There are no extra recommendations for Autocomplete.