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

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
}

Preview:

Changelog:

10/12/2021

• v1.11.2: update

06/30/2021

• v1.11.1: update

06/01/2021

• v1.11: Bugfixed

05/05/2021

• v1.10.4

10/09/2020

• v1.10.3

11/05/2019

• Bugs fixed
• Updated Enter behavior
• New showList control

Download Details:

Author: KazanExpress

Live Demo: https://kazanexpress.github.io/vue-simple-suggest/

Download Link: https://github.com/KazanExpress/vue-simple-suggest/archive/master.zip

Official Website: https://github.com/KazanExpress/vue-simple-suggest

Install & Download:

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