/v-autocomplete

Autocomplete component for Vue.js

Primary LanguageVue

v-autocomplete

Autocomplete component for Vue.js

This component is css-free. The idea is to be used with any framework.

Installation

Using yarn

yarn add v-autocomplete

Using npm

npm i --save v-autocomplete

Demo

DEMO

Usage

Bundler (Webpack, Rollup)

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)

Browser

<!-- Include after Vue -->
<link rel="stylesheet" href="v-autocomplete/dist/v-autocomplete.css"></link>
<script src="v-autocomplete/dist/v-autocomplete.js"></script>
<script>
  Vue.use(VAutocomplete.default)
</script>

Example

<template>
  <v-autocomplete :items="items" v-model="item" :get-label="getLabel" :component-item='template' @update-items="updateItems">
  </v-autocomplete>
</template>

<script>
import ItemTemplate from './ItemTemplate.vue'
export default {
  data () {
    return {
      item: {id: 9, name: 'Lion', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
      items: [],
      template: ItemTemplate
    }
  },
  methods: {
    getLabel (item) {
      return item.name
    },
    updateItems (text) {
      yourGetItemsMethod(text).then( (response) => {
        this.items = response
      })
    }
  }
}
</script>

ItemTemplate example:

<template>
  <div>
    <b>#{{item.id}}</b>
    <span>{{ item.name }}</span>
    <abbr>{{item.description}}</abbr>
  </div>
</template>

<script>
export default {
  props: {
    item: { required: true },
    searchText: { required: true }
  }
}
</script>

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:

.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:

.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

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

Using yarn

# install dependencies
$ yarn install

# compile demo for development
$ yarn dev

# open Browser and start serve in demo
$ yarn demo:open

# compile dist demo
$ yarn dist:demo

# compile dist
$ yarn dist

Using npm

# install dependencies
$ npm install

# compile demo for development
$ npm run dev

# open Browser and start serve in demo
$ npm run demo:open

# compile dist demo
$ npm run dist:demo

# compile dist
$ npm run dist

Authors

License

This project is licensed under MIT License