vue-suggestion

vue-suggestion

Suggestion list input for Vue.js, inspired by v-autocomplete.
Your search engine, your CSS, your everything...

Checkout demo.

Installation

• yarn: yarn add vue-suggestion
• npm: npm i --save vue-suggestion

Usage

• Import default CSS to your project:

  import 'vue-suggestion/dist/vue-suggestion.css';
  

• Import vue-suggestion into your Vue component and use it as normal:

  <template>
  ...
    <vue-suggestion></vue-suggestion>
  ...
  <template>
  <script>
  import VueSuggestion from 'vue-suggestion'   
  export default {
    ...
    components: {
      VueSuggestion
    }
  }
  </script>
  

!! You can also use it as a custom field of vue-form-generator.

Props

Property value	Type	Default value	Description
itemTemplate	vue component		Template for item in suggestion list
setLabel	function		Value of choosen input, be shown in the input
items	Array	[]	Suggestion array, should be updated dynamically after onInputChange()
minLen	Interger	2	Minimun number of characters inputted to start searching
disabled	Boolean	false	Disable the input
placeholder	String	''	Placeholder of the input

Events

Property value	Arguments	Description
onInputChange	String	Fires when the input changes with the argument is the current input text.
onItemSelected	Object	Fires when user selects a suggestion

Slots

Name	Description
searchSlot	Next to the input, for the custom search icon or button...

Style

Just overwrite their css classes:

.vue-suggestion
  .vue-suggestion-input-group
    .vue-suggestion-input
  .vue-suggestion-list
    .vue-suggestion-list-item
      &.vue-suggestion-item-active

Example

<template>
  <vue-suggestion :items="items" 
                  v-model="item", 
                  :setLabel="setLabel",
                  :itemTemplate="itemTemplate", 
                  @onInputChange="inputChange", 
                  @onItemSelected="itemSelected">
  </vue-suggestion>
</template>

<script>
import itemTemplate from './item-template.vue';
export default {
  data () {
    return {
      item: {},
      items: [
        { id: 1, name: 'Golden Retriever'},
        { id: 2, name: 'Cat'},
        { id: 3, name: 'Squirrel'},
      ],
      itemTemplate,
    }
  },
  methods: {
    itemSelected (item) {
      this.item = item;
    },
    setLabel (item) {
      return item.name;
    },
    inputChange (text) {
      // your search method
      this.items = items.filter(item => item.name.contains(text));
      // now `items` will be showed in the suggestion list
    },
  },
};
</script>

ItemTemplate example:

<template>
  <div>
    <b>#{{item.id}}</b>
    <span>{{ item.name }}</span>
  </div>
</template>

<script>
export default {
  props: {
    item: { required: true },
  }
}
</script>

Demo Usage

# install dependencies
$ yarn/npm install

# compile demo for development
$ yarn/npm dev

# open Browser and start serve in demo
$ yarn/npm demo:open

# compile dist demo
$ yarn/npm dist:demo

# compile dist
$ yarn/npm dist

Credits

• v-autocomplete

made with ❤ by Steven.