vue3-basic-autocomplete

1.0.1 • Public • Published

vue-basic-autocomplete

A Basic Vue.js autocomplete component. (Compatible with Vue.js 3)

Installation

NPM

$ npm install vue3-basic-autocomplete

Register the component

import { createApp } from 'vue'
import App from './App.vue'

import Vue3BasicAutocomplete from 'vue3-basic-autocomplete'

createApp(App)
.use(Vue3BasicAutocomplete)
.mount('#app')

Usage

<vue3-basic-autocomplete v-model="result" :options="items" trackby="name" input-class="form-control" />
// COMPOSITION API
import { toRefs, reactive } from 'vue'
setup () {
    const data = reactive({
        items: [
            {name: 'Josh', id: 1},
            {name: 'David', id: 2},
            {name: 'Angela', id: 3},
            {name: 'Alfred', id: 4},
        ],
        result: '',
    });

    return {
        ...toRefs(data)
    }
}

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

/vue3-basic-autocomplete/

    Package Sidebar

    Install

    npm i vue3-basic-autocomplete

    Weekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    38.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • ovictorpereira