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:

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.

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.