V Autocomplete Save

Autocomplete component for Vue.js

Project README


Autocomplete component for Vue.js

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


Using yarn

yarn add v-autocomplete

Using npm

npm i --save v-autocomplete




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'



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


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

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

ItemTemplate example:

    <span>{{ item.name }}</span>

export default {
  props: {
    item: { required: true },
    searchText: { required: true }


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


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:


Follows the css used in the DEMO:

      font-size 1.5em
      padding 10px 15px
      box-shadow none
      border 1px solid #157977
      width calc(100% - 32px)
      outline none
      background-color #eee
        color green
        background-color #f2fff2
    width 100%
    text-align left
    border none
    border-top none
    max-height 400px
    overflow-y auto
    border-bottom 1px solid #157977
      cursor pointer
      background-color #fff
      padding 10px
      border-bottom 1px solid #157977
      border-left 1px solid #157977
      border-right 1px solid #157977
        border-bottom none
        background-color #eee
        opacity 0.8
        font-size 0.8em
        display block
        font-family sans-serif


$ 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



This project is licensed under MIT License

Open Source Agenda is not affiliated with "V Autocomplete" Project. README Source: paliari/v-autocomplete
Open Issues
Last Commit
1 year ago

Open Source Agenda Badge

Open Source Agenda Rating