Text input for searching values or getting suggestions




Name Type Content
m-autocomplete Custom Element None
datalist Native element <option> elements


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.


Name Detail Description
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:


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:


There are no extra recommendations for Autocomplete.