vue-material-autocomplete-fix

This is an extended version of vue-material. Everything is same as is from vue-material.

Component: MdAutocomplete2

This package adds a new component MdAutocomplete2 and extended version of MdAutocomplete with a number of fixes and new features.

New features and fixes

Custom CSS class

• Use mdContentClasses prop to pass a custom class to the container of the search result box. Also, a class named md-autocomplete-menu-content is always added to the container of the search result box.

Better navigation and selection using keyboard

• Fix keyboard ArrowUp and ArrowDown navigation.
• By default, the the top-most item of the suggested results is highlighted.
• On pressing Enter or Tab, the highlighted items is selected and populated in the input field. The suggestion results popup hides.
• While the suggestion popup is not showing, it can be opened
  • By pressing ArrowUp and ArrowDown, Delete, Backspace keys, while the input field is in focus.
  • By pressing Enter while the input field is in focus, provided that the input field is empty.
  • By starting typing in the input field (can be disabled setting mdOpenOnInput prop to false).
• In case the suggestion popup has no result or is empty, a default empty message "No data available" is shown (without defining md-autocomplete-empty slot). The value can be modified using mdEmptyText prop.

Strict Mode

• In case the suggestion popup has no result or is empty, but the input field has a value in it, which may not be the desired input value, it will be cleaned pressing Enter or Tab. This mode can be disabled setting mdCleanEmptyOnEnter prop to false.
• mdStrict prop allows a value which is present in the options list. The input field's value, when a match is not found will be cleaned on focus or blur. While typing, text field characters will be restricted to combination of characters for which at-least one result is found. To disable this set mdString to false.

Show all results at first

• By default, when the suggestion popup opens and there is already a value in the input field, the suggestion result for once, does not
  filter based on the input field's value. It shows all the values. The filtering starts in case the input value changes. This can be disabled using mdSkipFilterOnOpen prop to false.
• When mdSkipFilterOnOpen is true and search box opens and if the input field already has a value, tt will first try to match the exact value from the input field with search options and highlight it.

New props

| Name | Type | Default | Description | |-----------------------|---------------------------|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------| | mdEmptyText | String | "No data available" | Shows this message as default when there is no/empty suggested result. | | mdCleanEmptyOnEnter | Boolean | true | When the suggested result is empty, and Enter is pressed, the input field is cleaned. This can be disabled setting the value to false. | | mdOpenOnInput | Boolean | true | This adds additional feature along with mdOpenOnFocus. It allows to open the suggested results popup, in case it's closed when typing in the input box starts. | | mdSkipFilterOnOpen | Boolean | true | This allows to show all the suggested items in the popup when the suggested popup is open again. | | mdContentClasses | String or Array or Object | '' | This allows to add a custom css class to the search box. | | mdStrict | Boolean | true | Use strict mode. Value in the input field must match one of the values in options. |

Installation and Usage

Install Vue Material through npm or yarn

npm install vue-material-autocomplete-fix --save
yarn add vue-material-autocomplete-fix

* Others package managers like JSPM and Bower are not supported yet.

Import or require Vue and Vue Material in your code:

import Vue from 'vue'
import VueMaterial from 'vue-material-autocomplete-fix'
import 'vue-material-autocomplete-fix/dist/vue-material-autocomplete-fix.min.css'

Vue.use(VueMaterial)

Or use individual components:

import Vue from 'vue'
import { MdButton, MdContent, MdTabs } from 'vue-material-autocomplete-fix/dist/components'
import 'vue-material-autocomplete-fix/dist/vue-material-autocomplete-fix.min.css'

Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)

License

MIT