Autocomplete Component For Vue.js - vue-simple-suggest

Install & Download:

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

Description:

vue-simple-suggest is a simple yet feature-rich autocomplete component for Vue.js app.

Features:

v-model support.
Switching v-model type (select/input).
Custom input element through default slot.
Custom list items through named scoped slots.
All HTML5-valid props for default input element are provided (type, tabindex and etc…).
Customizable keyboard controls.
Rich and simple API.
CSS classes for quick and easy restyling.
Many build variants to choose from.
Flexible and customizable component design.

How to use it:

1. Import the vue-simple-suggest and optional stylesheet.

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

2. Add the vue-simple-suggest component to the template.

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

3. Register the component and define an 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. Available component props.

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
}