vue-suggestion

Suggestion list input for Vue.js

Useful Links

Table of Contents

Getting started
Installation
- npm
- Browser
Usage
- Props
- Events
- Slots
Credits

Getting started

Install the plugin:
```
npm install vue-suggestion
```

Add the plugin into your app:

import Vue from 'vue'
import VueSuggestion from 'vue-suggestion'

Vue.use(VueSuggestion)

More info on installation

Use the vue-suggestion component:

<template>
  <vue-suggestion :items="items" 
                  v-model="item" 
                  :setLabel="setLabel"
                  :itemTemplate="itemTemplate"
                  @changed="inputChange" 
                  @selected="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>

Installation

npm

  npm install vue-suggestion

Install the plugin into Vue:

import Vue from 'vue'
import VueSuggestion from 'vue-suggestion'

Vue.use(VueSuggestion, [globalOptions = {}]) // Define default global options here (optional)

View all available options in Props.

Or use the component directly:

<!-- your-component.vue-->
<template>
  <vue-suggestion v-model="value"></vue-suggestion>
</template>

<!-- some-sample-css-as-example-for-your-dropdown-autocomplete  -->
<style scope>
.vue-suggestion .vs__list {
    width: 100%;
    text-align: left;
    border: none;
    border-top: none;
    max-height: 400px;
    overflow-y: auto;
    border-bottom: 1px solid #023d7b;
    position: relative;
}
.vue-suggestion .vs__list .vs__list-item {
    background-color: #fff;
    padding: 10px;
    border-left: 1px solid #023d7b;
    border-right: 1px solid #023d7b;
}
.vue-suggestion .vs__list .vs__list-item:last-child {
    border-bottom: none;
}
.vue-suggestion .vs__list .vs__list-item:hover {
    background-color: #eee !important;
}
.vue-suggestion .vs__list,
.vue-suggestion .vs__loading {
    position: absolute;
}
.vue-suggestion .vs__list .vs__list-item {
    cursor: pointer;
}
.vue-suggestion .vs__list .vs__list-item.vs__item-active {
    background-color: #f3f6fa;
}
</style>

<script>
import { VueSuggestion } from 'vue-suggestion';

export default {
  components: {
    VueSuggestion,
  },
};
</script>

Browser

Include vue-suggestion in the page.

<script src="https://unpkg.com/vue-suggestion"></script>

If Vue is detected in the Page, the plugin is installed automatically.

Manually install the plugin into Vue:

Vue.use(VueSuggestion)

Or use the component directly:

Vue.component('vue-suggestion', VueSuggestion.VueSuggestion)

Usage

Props

Property	Type	Default value	Description
`itemTemplate`	Vue component		Template for item in suggestion list
`inputClasses`	`string`		Custom classes. eg: 'form-control, is-valid'.
`setLabel`	`function`		Value of chosen input, be shown in the input
`items`	`Array`	`[]`	Suggestion array, should be updated dynamically after `onInputChange()`
`minLen`	`Number`	`2`	Minimum number of characters inputted to start searching
`maxLen`	`Number`	`100`	Native input 'maxlength' attribute
`disabled`	`Boolean`	`false`	Disable the input
`placeholder`	`String`	`''`	Placeholder of the input

Events

Event	Arguments	Description
`changed`	`String`	Fires when the input changes with the argument is the current input text.
`selected`	`Object`	Fires when user selects a suggestion
`enter`	`Object`	Native enter/return key press event
`key-up`	`Object`	Native key up event
`key-down`	`Object`	Native key down event
`focus`	`Object`	Native focus event
`blur`	`Object`	Native blur event

Slots

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

Credits

v-autocomplete

made with ❤ by Steven.

aangindra/vue-suggestion