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