/ Autocomplete

Suggestion list input for Vue.js

Suggestion list input for Vue.js


Suggestion list input for Vue.js, inspired by v-autocomplete.
Your search engine, your CSS, your everything...



  • yarn: yarn add vue-suggestion
  • npm: npm i --save vue-suggestion


  • Import default CSS to your project:
    import 'vue-suggestion/dist/vue-suggestion.css';
  • Import vue-suggestion into your Vue component and use it as normal:
    import VueSuggestion from 'vue-suggestion'   
    export default {
      components: {

!! You can also use it as a custom field of vue-form-generator.


Property value Type Default value Description
itemTemplate vue component Template for item in suggestion list
setLabel function Value of choosen input, be shown in the input
items Array [] Suggestion array, should be updated dynamically after onInputChange()
minLen Interger 2 Minimun number of characters inputted to start searching
disabled Boolean false Disable the input
placeholder String '' Placeholder of the input


Property value Arguments Description
onInputChange String Fires when the input changes with the argument is the current input text.
onItemSelected Object Fires when user selects a suggestion


Name Description
searchSlot Next to the input, for the custom search icon or button...


Just overwrite their css classes:



  <vue-suggestion :items="items" 

import itemTemplate from './item-template.vue';
export default {
  data () {
    return {
      item: {},
      items: [
        { id: 1, name: 'Golden Retriever'},
        { id: 2, name: 'Cat'},
        { id: 3, name: 'Squirrel'},
  methods: {
    itemSelected (item) {
      this.item = item;
    setLabel (item) {
      return item.name;
    inputChange (text) {
      // your search method
      this.items = items.filter(item => item.name.contains(text));
      // now `items` will be showed in the suggestion list

ItemTemplate example:

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

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

Demo Usage

# install dependencies
$ yarn/npm install

# compile demo for development
$ yarn/npm dev

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

# compile dist demo
$ yarn/npm dist:demo

# compile dist
$ yarn/npm dist