Autocomplete & Autosuggestion Component For Vue.js

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

Preview:

Changelog:

v2.1.0 (12/21/2022)

• feat: Add input id prop
• feat: Add @clear event

v2.0.0 (08/16/2021)

• complete rewrite

v1.1.0 (02/29/2020)

• Update

Download Details:

Author: paliari

Live Demo: https://iamstevendao.github.io/vue-suggestion/

Download Link: https://github.com/iamstevendao/vue-suggestion/archive/master.zip

Official Website: https://github.com/iamstevendao/vue-suggestion

Install & Download:

# Yarn
$ yarn add vue-suggestion

# NPM
$ npm install vue-suggestion --save