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