Vue Material -

Autocomplete


by Creative Tim
Docs
Components
Premium themes

Input text can be used with autocomplete to help users who have limited literacy or who write in a foreign language. For example, autocomplete can suggest input as it’s typed (refreshing suggestions with each keystroke).

Vue Material autocomplete is really simple, yet powerfull. With simple options you can create great suggestions with async feedbacks.

Autocomplete works like md-field. This means that you can pass labels, validation messages, helper texts and even icons:

Static Data

If you have a small amount of data or if it's static, you can pass the options to md-autocomplete in a simple and intuitive way:

Normal and Dense

Trigger

By default the suggestions will appear along with a focus trigger. If you want something less intrusive, you can disable this behaviour by canceling the focus event. If this, the suggestions will appear right after a keystroke:

Focus vs Input

Box Layout

Autocomplete have types two layouts: Default with floating labels and a boxed layout with inline labels. The box layout will apply a boxed layout with a small elevation, that also works really great as search bar inside a toolbar. Gorgeous:

Works with dense variant too!

Custom Template

This section will assume that you have knowledge of Vue Scoped Slots. This will allow you to customize the option list.

Autocomplete also accepts a custom template, flexible to accept any HTML element and with an 'empty state' built in. You can also highlight the search term inside the matches, to give a feedback on why that item has been in the results. Awesome:

With highlight text
Although the md-highlight-text component is most used with autocomplete, you can use it anywhere.

Search Algorithms

Vue Material autocomplete comes with 2 ways of search: Fuzzy search and search by whole term. The fuzzy search tries to match the results by approximation, finding patterns inside the available options. This will help with accidental type errors and improve the results. If you think that this may be confusing, you can disable this. Example:

Fuzzy search - search term: pam

Matches:
  • Pam Beesly
  • Meredith Palmer

Normal Search - search term: pam

Matches:
  • Pam Beesly
Fuzzy or Normal
Fuzzy Search:
Normal Search:

Async Options

Sometimes the options are inside a database in a remote server. Instead of giving a static data, we can provide a Promise that will resolve with the data from a backend servide, for example. This is great to save Bandwidth on the initial load and to improve the performance. Look at this example:

Spinner Loading

API - md-autocomplete

All the following options can be used on any autocomplete:

NameDescriptionDefault
v-model String|Number|Boolean|Array The model variable to bind the autocomplete value null
md-options Array|Promise The available options to be searched. If Array, the autocomplete will use a inner search engine. If Promise, you will need to implement the search by yourself (this is commonly made by a backend service). []
md-input-name String The input name attribute null
md-input-id String The input id attribute a random string
md-input-max-length Number Enables a character count, based on the given value. null
md-input-placeholder Number Sets a optional placeholder on autocomplete. null
md-dense Boolean Enable the dense layout for options false
md-layout String Sets the input layout. The floating variant is the default. See below the detailed description of each layout. floating
md-layout="floating" String Sets the input layout to floating. This is the default. -
md-layout="box" String Sets the input layout to a boxed layout. -
md-open-on-focus Boolean Disable/enable the on focus event. If false, the options will show the results right after a keystroke. true
md-fuzzy-search Boolean Disable/enable the fuzzy search algorithm. If false, the search will match the whole search term. This option do not take any effects if the md-options is a Promise true

API - md-highlight-text

The following options can be used with highlight text:

NameDescriptionDefault
md-term String The search term to highlight null
md-fuzzy-search Boolean Disable/enable the fuzzy highlight algorithm. If false, the highlight will match the whole search term. true