Autocomplete & Autosuggestion Component For Vue.js

Install & Download:

# Yarn
$ yarn add vue-suggestion
# NPM
$ npm install vue-suggestion --save

Description:

This is a basic autocomplete & autosuggestion component for input fields.

How to use it:

1. Import & register the vue-suggestion.

import Vue from 'vue';
import VueSuggestion from 'vue-suggestion';
Vue.use(VueSuggestion, globalOptions);
// or
Vue.use(VueSuggestion, globalOptions);
import { VueSuggestion } from 'vue-suggestion';
export default {
  components: {
    VueSuggestion,
  },
};

2. Add the vue-suggestion component to the template.

<template>
  <vue-suggestion v-model="value" :items="items"></vue-suggestion>
</template>

export default {
  data() {
    return {
      item: {},
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
  methods: {
   // ...
  },
};

3. Available props.

value: {
  type: [Object, String, Number],
  default: null,
},
itemTemplate: {
  type: Object,
  default: () => getDefault('itemTemplate'),
},
minLen: {
  type: Number,
  default: () => getDefault('minLen'),
},
setLabel: {
  type: Function,
  default: () => getDefault('setLabel'),
},
items: {
  type: Array,
  default: () => getDefault('items'),
},
disabled: {
  type: Boolean,
  default: () => getDefault('disabled'),
},
loading: {
  type: Boolean,
  default: () => getDefault('loading'),
},
styleClasses: {
  type: [Object, String, Number],
  default: () => getDefault('styleClasses'),
},
inputOptions: {
  type: Object,
  default: () => getDefault('inputOptions'),
},
suggestionOptions: {
  type: Object,
  default: () => getDefault('suggestionOptions'),
},

4. Events.

@changed (searchText: String): Fires when the input changes with the argument is the current input text.
@selected (item: String|Object): Fires when user selects a suggestion