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
Preview:
Changelog:
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