# vue-autocompleter

> yet another autocomplete plugin

Latest version **0.3.17** (published 2017-08-13) · 0 weekly downloads

## Install

```sh
npm install vue-autocompleter
pnpm add vue-autocompleter
yarn add vue-autocompleter
bun add vue-autocompleter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.17 |
| Published | 2017-08-13 |
| First published | 2017-08-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | ahmadpx, islam3zzat |

## Links

- npm: https://www.npmjs.com/package/vue-autocompleter
- npm.io page: https://npm.io/package/vue-autocompleter

## Dependencies (2)

- [axios](https://npm.io/package/axios.md) ^0.16.2
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8

## Recent versions

- 0.3.17 (latest) — 2017-08-13
- 0.3.16 — 2017-08-13
- 0.2.16 — 2017-08-13
- 0.1.16 — 2017-08-09
- 0.1.15 — 2017-08-09
- 0.0.13 — 2017-08-06
- 0.0.12 — 2017-08-06
- 0.0.11 — 2017-08-06
- 0.0.0 — 2017-08-04
- 1.0.0 — 2017-08-04

## README

# vue-autocompleter

> yet another autocomplete plugin

## Installing
```bash
# using yarn
yarn add vue-autocompleter
# using npm
npm install --save vue-autocompleter
```
``` javascript
# in main.js for example
// ...
import Autocomplete 'vue-autocompleter'
```
## Usage
``` html
<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
```html
<!-- example -->
  <template  scope="{option, index}">
    <div class="option">
      <strong>{{index}}</strong>
      <span>{{option}}</span>
    </div>
  </template>

```


## Build Setup

``` bash
# 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
```

---
_Source: https://npm.io/package/vue-autocompleter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._