<h2 align="center">vue-autocomplete-ele</h2>
npm install vue-autocomplete-ele
npm install vue-autocomplete-ele
`
Usage
`
import VueAutocompleteEle from 'vue-autocomplete-ele';
`
Configuration
| Prop | Type | Default | Description |
|---------------------|---------------|---------------------------|-------------------------------|
| src | Object | | `{ data: Array, valueIndex: String , labelIndex: String } `|
| id | String | vue-autocomplete |
| minChars | Number | 0 | Minimum number of characters (>=1) a user must type before a search is performed.|
| delay | Number | 0 | The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay is more responsive, but can produce a lot of load.|
| offsetLeft | Number | 1 | Optional left offset of the suggestions container.|
| offsetTop | Number | 1 | Optional top offset of the suggestions container. |
| inputClass | String | | Custom class/es that get/s added to the input element.|
| containerClass | String | | Custom class/es that get/s added to the dropdown menu container.|
| suggestionClass | String | | Custom class/es that get/s added to the dropdown menu.|
| noCache | Boolean | false | Determines if performed searches should be cached.|
| sourceHandler | Function | | The sourceHandler function iterates through an array of (local) choices and we return a new array containing all (lowercased) matches.|
| renderHandler | Function | | The renderHandler function allows to customize the dropdown menu item|
| onSelectHandler | Function | | The onSelectHandler function allows to do something on select event|
Example
`
:src="{
data: [
{
'id': 125,
'sku': 'AAAAAAAAAA',
},
{
'id': 154,
'sku': 'LIQ-01',
},
{
'id': 186,
'sku': 'SHEET-01',
},
{
'id': 187,
'sku': 'SHEET-02',
}
],
valueIndex: 'id',
labelIndex: 'sku'
}"
@selected="autocomplete = $event" // returning data for valueIndex for selected item
/>
``