Feature-rich Autocomplete Component for Vue.js

Vue simple suggestion is a simple but feature-rich autocomplete component for Vue.js.

vue 3 autocomplete component, v autocomplete multiple item text, vue js autocomplete, v autocomplete example, v autocomplete return object, v autocomplete on change

In fact, it’s so feature-rich that it’s possible to do crazy things with it, like

Mimic drop-down menus and drop-down menus
Turn your suggestion list into a real suggestion table
Work with any type of custom input passed (eg type = button, radio, etc.)
…and many other things

And as a bonus, it is very light.

Features

Support the fifth model.
Automatic Accessibility Attributes (WAI-ARIA Full)
Toggle the fifth form type (select / enter).
Custom input element through the default slot.
Custom menu items through range-bound slots.
All valid HTML5 properties are provided for default input elements (type, tab index, etc…).
Customizable keyboard controls.
Rich and simple API.
CSS classes for quick and easy restyling.
Several construction variants to choose from.
Flexible and customizable component design.
IE’s optional polyfills are importable from the lib.

All properties, events, and slots are optional for this component, so it can be used without any configuration at all.

How to make use of it:

Install and download:

# NPM
$ npm install vue-simple-suggest --save

1. Import vue-simple-suggest optional stylesheet.

import VueSimpleSuggest from 'vue-simple-suggest'
import 'vue-simple-suggest/dist/styles.css'

2. Add the vue-simple-Suggest component to the form.

<template>
  <vue-simple-suggest
    v-model="chosen"
    :list="suggestionList"
  >
</vue-simple-suggest>

3. Register the component and select the list of suggestions as follows:

export default {
  components: {
    VueSimpleSuggest
  },
  data() {
    return {
      chosen: ''
    }
  },
  methods: {
    suggestionList() {
      return [
        'Vue',
        'React',
        'Angular'
      ]
    }
  }
}

4. Or get suggestions from a remote data source.

export default {
  components: {
    VueSimpleSuggest
  },
  data() {
    return {
      chosen: ''
    }
  },
  methods: {
    // returns a promise as a factory for suggestion lists.
    getSuggestionList() {
      return fetch('/path/to/api/', { method: 'GET' })
        .then(response => response.json())
        .then(json => json.results);
    }
  }
}

5. Component props available.

styles: {
  type: Object,
  default: () => ({})
},
controls: {
  type: Object,
  default: () => defaultControls
},
minLength: {
  type: Number,
  default: 1
},
maxSuggestions: {
  type: Number,
  default: 10
},
displayAttribute: {
  type: String,
  default: 'title'
},
valueAttribute: {
  type: String,
  default: 'id'
},
list: {
  type: [Function, Array],
  default: () => []
},
removeList: {
  type: Boolean,
  default: false
},
destyled: {
  type: Boolean,
  default: false
},
filterByQuery: {
  type: Boolean,
  default: false
},
filter: {
  type: Function,
  default(el, value) {
    return value ? ~this.displayProperty(el).toLowerCase().indexOf(value.toLowerCase()) : true
  }
},
debounce: {
  type: Number,
  default: 0
},
nullableSelect: {
  type: Boolean,
  default: false
},
value: {},
mode: {
  type: String,
  default: 'input', // or 'select'
  validator: value => !!~Object.keys(modes).indexOf(value.toLowerCase())
},
preventHide: {
  type: Boolean,
  default: false
}

Autocomplete Component For Vue.js, vue simple suggest Plugin/Github, vue js autocomplete from database, bootstrap vue autocomplete