# rdr-autocomplete

> Autocomplete component for Vue.js

Latest version **0.0.2** (published 2020-02-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install rdr-autocomplete
pnpm add rdr-autocomplete
yarn add rdr-autocomplete
bun add rdr-autocomplete
```

## 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.0.2 |
| Published | 2020-02-02 |
| First published | 2020-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ronald de Rooij |
| Maintainers | ronaldderooij |

## Links

- npm: https://www.npmjs.com/package/rdr-autocomplete
- npm.io page: https://npm.io/package/rdr-autocomplete

## Recent versions

- 0.0.2 (latest) — 2020-02-02
- 0.0.1 — 2020-02-02

## README

rdr-autocomplete
==============

---
> Autocomplete component for Vue.js

Installation
------------

### Using npm

`npm i --save rdr-autocomplete`

Usage
-----

### Bundler (Webpack, Rollup)

```js
import Vue from 'vue'

import RdrAutocomplete from 'rdr-autocomplete'

Vue.use(RdrAutocomplete)
```

### Example

```html
<template>
    <rdr-autocomplete
        :label="'Label'"
        :labelClass="'Label-class'"
        :placeholder="'Placeholder input'"
        :inputClass="classes"
        :items="autocompleteItems"
        v-model="autocompleteValue"
    />
</template>

<script>
export default {
  data () {
    return {
      autocompleteItems: ['Aa', 'Bb', 'Cc', 'Ab', 'Ac']
    }
  },
}
</script>
```

Properties
----------

| Name                     | Type                                | Required | Default value                  | Info                                                                                                   |
| ------------------------ | ----------------------------------- | -------- | ------------------------------ | ------------------------------------------------------------------------------------------------------ |
| **inputId**              | String                              | No       | input- + 'Random Nr'           | Chain label to input                                                                                   |
| **labelClass**           | String                              | No       |                                | Label Class                                                                                            |
| **label**                | String                              | No       |                                | Label name                                                                                             |
| **inputClass**           | String or Object                    | No       |                                | Input Class                                                                                            |
| **placeholder**          | String                              | No       |                                | Input placeholder                                                                                      |
| **inputType**            | String                              | No       | Search                         | Input type (text/search/email/etc..                                                                    |
| **items**               | Array                               | Yes      |                                | Array which contains the autocomplete items                                                            |     |

Events
------

| Name              | Params                       | Info                                                  |
| ----------------- | ---------------------------- | ----------------------------------------------------- |
| **onChange**      | *item*: Item changed         | Triggered after any changed in the model              |
| **keyEnter**      | *item*: Item selected        | Like @input, but only when has value                  |
| **blur**          | *text*: Text of search input | Triggered on blur in the search input                 |
| **focus**         | *text*: Text of search input | Triggered on focus in the search input                |


Authors
-------

-	[Ronald de Rooij](https://www.ronaldderooij.nl)

License
-------

This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)

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