Autocomplete & Autosuggestion Component For Vue.js

Autocomplete & Autosuggestion Component For Vue.js

This is a basic autocomplete, autosuggestion component for input fields.

vue-suggestion

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

Checkout demo.

In-action GIF

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
setLabel function
items Array []
minLen Interger 2
disabled Boolean false
placeholder String ''

Events

Property value Arguments Description
onInputChange String
onItemSelected Object

Slots

Name Description
searchSlot

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

made with ❤ by Steven.

Github Repository

Tags: #VueJs