vue-suggestion-list

Simple to use, mobile-friendly suggestion list using native html5 datalist

Install

1npm install vue-suggestion-list --save

---

How to use

Include plugin in your project.

1import SuggestionList from 'vue-suggestion-list';
2
3/*
4 Use as global component 
5 */
6Vue.use(SuggestionList);
7
8/*
9 Or as local component
10 */
11const vue = new Vue({
12    components:{
13        SuggestionList
14    }
15});
16

Create list

1<suggestion-list :items="items" v-model="item"></suggestion-list>

Items must be an array of objects in the below format

1[
2    {text: 'First', value: 1},
3    {text: 'Two', value: 2},
4    {text: 'Three', value: 3}
5]

Note: Suggestion input box is given with two classes, form-control,vue-suggestion-input and suggestion datalist is given with a default class of vue-suggestion-list. So that you can applay custom styles on vue-suggestion-input and vue-suggestion-list classes.

---

Properties

Name	Required	Type	Default	Description
items	true	Array		List items in the format [{value:'value',text:'text'}]

---

Example

1<template>
2  <list :items="items" v-model="value"></list>
3</template>
4<script>
5export default {
6  name: 'ExampleList',
7  data () {
8        return {
9            value: '2',
10            items: [
11                {text: 'First', value: 1},
12                {text: 'Two', value: 2},
13                {text: 'Three', value: 3}
14            ]
15        }   
16  },
17 
18}
19</script>