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:
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:
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:
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:
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:
md-highlight-text
component is most used with autocomplete, you can use it anywhere.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
Normal Search - search term: pam
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:
All the following options can be used on any autocomplete:
Name | Description | Default |
---|---|---|
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 |
The following options can be used with highlight text:
Name | Description | Default |
---|---|---|
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 |