0.3.17 • Published 7 years ago
vue-autocompleter v0.3.17
vue-autocompleter
yet another autocomplete plugin
Installing
# using yarn
yarn add vue-autocompleter
# using npm
npm install --save vue-autocompleter# in main.js for example
// ...
import Autocomplete 'vue-autocompleter'Usage
<Autocomplete
:placeholder=<placeholder>
:limit=<limit>
:transform=<path>
:api=<api>
:param=<param>
:method=<method>
:closeOnSelect=<closeOnSelect>
:resetOnSelect=<resetOnSelect>
:optionsStyles=<optionsStyles>
:optionStyles=<optionStyles>
:inputStyles=<inputStyles>
:optionsClass=<optionsClass>
:optionClass=<optionClass>
:inputClass=<inputClass>
v-model=<msg>
>
</Autocomplete>Documentation
| Prop | Type | Description | Default value |
|---|---|---|---|
| placeholder | String | input Placeholder | Placeholder |
| limit | Number | results limit | 5 |
| transform | Function, String | transformer function to map response to the desired option, or just a string representing key to grap from response | null |
| api | String | api endpoint | null |
| param | String | param for search value | q (demo) |
| otherParams | Object | other params passed with the request | {} |
| method | String | Api http method | GET |
| closeOnSelect | Boolean | Close dropdown once select an element | true |
| resetOnSelect | Boolean | Reset dropdown once select an element | true |
| inputStyles | Object | inline styles for input | {} |
| optionsStyles | Object | inline styles for options | {} |
| optionStyles | Object | inline styles for option item | {} |
| inputClass | String | input class | null |
| optionsClass | String | input class | null |
| optionClass | String | input class | null |
| beforeSearch | Function | functions gets called before sending api request, accepts two params (url, query) | null |
| filterMethod | Function | method to be used to filter provided options (should return boolean) | null |
| afterSearch | Function | functions called after api response, accepts one param (response) | null |
| beforeUpdateValue | Function | functions called before update value, accepts one param (value) | null |
| shouldUpdateValue | Function | functions called before update value, accepts one param (value) and returns boolean wether to update value or not | null |
| afterUpdateValue | Function | functions called after update value, accepts one param (value) | null |
Customize option
You can customize how the option will be displayed by adding your template
<!-- example -->
<template scope="{option, index}">
<div class="option">
<strong>{{index}}</strong>
<span>{{option}}</span>
</div>
</template>Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test