npm.io
2.3.5 • Published 2 years ago

vue-basic-autocomplete

Licence
MIT
Version
2.3.5
Deps
0
Size
42 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

vue-basic-autocomplete

A Vue.js autocomplete component. Compatible with Vue 2.x.

Sandbox

Installation

NPM

$ npm install vue-basic-autocomplete --save

Register the component

import Vue from 'vue'
import VueBasicAutocomplete from 'vue-basic-autocomplete'

Vue.use(VueBasicAutocomplete)

Usage

<vue-basic-autocomplete v-model="result" :options="myArray" trackby="name" input-class="form-control" />
new Vue({
    data: {
        myArray: [
            {name: 'Mariah', id: 1},
            {name: 'Josh Daves', id: 2},
            {name: 'John Sec', id: 3},
            {name: 'Robertson Daves', id: 4},
        ],
        result: ''
    }
})

Available props

Prop Type Default Description
options Array (required) Array of items to autocomplete
minlength Number 1 Min. length to start listing. If set to 0, all options will be listed on focus
none-find String No matching results Default label when there are no matching results
trackby String Required when you are using an array of objects
placeholder String Placeholder
disabled Boolean false
list-max-height String 300 Max-heigth in px
input-class String Custom CSS class for the input. Since I am using Bootstrap, I set it as 'form-control'
clear-btn Boolean false Shows a clear button appended to the input

Events

Event Description
selected Triggers when you select any item

Keywords

vueautocompleteselectlibraryvuebasicautocomplete