# vue-basic-autocomplete

> A Vue.js autocomplete component. Compatible with Vue 2.x.

Latest version **2.3.5** (published 2024-03-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-basic-autocomplete
pnpm add vue-basic-autocomplete
yarn add vue-basic-autocomplete
bun add vue-basic-autocomplete
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.5 |
| Published | 2024-03-21 |
| First published | 2017-12-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 41.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Victor Pereira |
| Maintainers | ovictorpereira |
| Keywords | vue, autocomplete, select, library, vuebasicautocomplete |

## Links

- npm: https://www.npmjs.com/package/vue-basic-autocomplete
- Homepage: https://github.com/ovictorpereira/vue-basic-autocomplete
- npm.io page: https://npm.io/package/vue-basic-autocomplete

## Recent versions

- 2.3.5 (latest) — 2024-03-21
- 2.3.4 — 2021-05-20
- 2.3.3 — 2021-05-20
- 2.3.2 — 2020-01-29
- 2.3.1 — 2020-01-09
- 2.3.0 — 2020-01-09
- 2.2.2 — 2019-12-19
- 2.2.1 — 2019-09-02
- 2.2.0 — 2019-09-02
- 2.1.1 — 2019-09-02
- 2.1.0 — 2019-08-02
- 2.0.9 — 2019-08-02
- 2.0.8 — 2019-08-02
- 2.0.7 — 2019-02-26
- 2.0.6 — 2019-02-26
- … 11 more at https://npm.io/package/vue-basic-autocomplete/versions

## README

# vue-basic-autocomplete
A Vue.js autocomplete component. Compatible with Vue 2.x.

#### [Sandbox](https://jsfiddle.net/ovictorpereira/tk65ecL8/15/ "Sandbox")

## Installation
NPM
```bash
$ npm install vue-basic-autocomplete --save
``` 
Register the component
```js
import Vue from 'vue'
import VueBasicAutocomplete from 'vue-basic-autocomplete'

Vue.use(VueBasicAutocomplete)
``` 

## Usage
```html
<vue-basic-autocomplete v-model="result" :options="myArray" trackby="name" input-class="form-control" />
```
```js
new Vue({
    data: {
        myArray: [
            {name: 'Mariah', id: 1},
            {name: 'Josh Daves', id: 2},
            {name: 'John Sec', id: 3},
            {name: 'Robertson Daves', id: 4},
        ],
        result: ''
    }
})
```

## Available props

| Prop        | Type             | Default                | Description                                      |
|-------------|------------------|------------------------|--------------------------------------------------|
| options     | Array (required) |                        | Array of items to autocomplete                 |
| minlength   | Number           | 1                      | Min. length to start listing. If set to 0, all options will be listed on focus   |
| none-find    | String           | No matching results    | Default label when there are no matching results |
| trackby     | String           |                        | Required when you are using an array of objects  |
| placeholder | String           |                        | Placeholder                                      |
| disabled    | Boolean           |    false                    |                                       |
| list-max-height | String       |       300              | Max-heigth in px                                      |
| input-class     | String           |                  | Custom CSS class for the input. Since I am using Bootstrap, I set it as 'form-control' |
| clear-btn     | Boolean           |         false         | Shows a clear button appended to the input |


## Events
| Event    |  Description |
|----------|--------------|
| selected     |  Triggers when you select any item       |

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