v-autocomplete
==============

---

> Autocomplete component for Vue.js
>
> This component is css-free. The idea is to be used with any framework.

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

$3

yarn add v-autocomplete

$3

npm i --save v-autocomplete

Demo
----

DEMO

Usage
-----

$3

``js
import Vue from 'vue'

import Autocomplete from 'v-autocomplete'

// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'v-autocomplete/dist/v-autocomplete.css'

Vue.use(Autocomplete)
`

$3

`html




`

$3

`html



`

ItemTemplate example:

`html



`

Properties
----------

| Name | Type | Required | Default value | Info |
| ------------------------ | ----------------------------------- | -------- | ------------------------------ | ------------------------------------------------------------------------------------------------------ |
| items | Array | Yes | | List items |
| component-item | Vue Component or Function or String | No | Item | Item list template |
| min-len | Number | No | 3 | Min length to trigger the updateItems event |
| wait | String | No | 500 | Miliseconds dela to trigger the updateItems event |
| get-label | Function | No | function(item) { return item } | Anonymous function to extract label of the item |
| value | Mixed | No | | Initial value (use v-model) |
| auto-select-one-item | Boolean | No | true | Auto select item if result one item in items |
| input-attrs | Object | No | {} | Attributes for input |
| keep-open | Boolean | No | false | If true, suggestions list stays open even when input is not active |
| placeholder | String | No | | Deprecated, will be removed in the next version. Use input-attrs |
| input-class | String | No | | Custom class of input search. Deprecated, will be removed in the next version. Use input-attrs |
| disabled | Boolean | No | false | Disable input. Deprecated, will be removed in the next version. Use input-attrs |

Events
------

| Name | Params | Info |
| ----------------- | ---------------------------- | ----------------------------------------------------- |
| input | item: Item changed | Triggered after any changed in the model |
| change | text: Text of search input | Triggered after every change in the search input |
| update-items | text: Text of search input | Same as change, but respecting min-len and wait |
| item-clicked | item: Item clicked | Triggered after a click on a suggestion |
| item-selected | 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 |

What about appearence?
----------------------

Just overwrite their css classes. See the structure in stylus lang:

`stylus
.v-autocomplete
.v-autocomplete-input-group
.v-autocomplete-input
.v-autocomplete-list
.v-autocomplete-list-item
&.v-autocomplete-item-active
`

Follows the css used in the DEMO:

`stylus
.v-autocomplete
.v-autocomplete-input-group
.v-autocomplete-input
font-size 1.5em
padding 10px 15px
box-shadow none
border 1px solid #157977
width calc(100% - 32px)
outline none
background-color #eee
&.v-autocomplete-selected
.v-autocomplete-input
color green
background-color #f2fff2
.v-autocomplete-list
width 100%
text-align left
border none
border-top none
max-height 400px
overflow-y auto
border-bottom 1px solid #157977
.v-autocomplete-list-item
cursor pointer
background-color #fff
padding 10px
border-bottom 1px solid #157977
border-left 1px solid #157977
border-right 1px solid #157977
&:last-child
border-bottom none
&:hover
background-color #eee
abbr
opacity 0.8
font-size 0.8em
display block
font-family sans-serif
`

Development
-----------

`bash
$ git clone https://github.com/paliari/v-autocomplete.git
$ cd v-autocomplete

`

$3

`bash

install dependencies

`

$3

`bash

install dependencies

``

Authors
-------

- Marcos Paliari
- Daniel Fernando Lourusso

License
-------

This project is licensed under MIT License