vue-basic-autocomplete

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

Sandbox

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 |