biesbjerg/vue3-autocomplete

Vue3 component used to search and select an item in a custom list.

vue3-autocomplete

Table of contents

• Installation
• Usage

Installation

Using npm

npm install vue3-autocomplete

Using yarn

yarn add vue3-autocomplete

Usage

Load the component globally...

import App from './App.vue' // Or whatever you need
import Autocomplete from 'vue3-autocomplete'
// Optional: Import default CSS
import 'vue3-autocomplete/dist/vue3-autocomplete.css'

let app = createApp(App)
app.component('Autocomplete', Autocomplete)
app.mount('#app')

... Or locally into your component.

import Autocomplete from 'vue3-autocomplete'
// Optional: Import default CSS
import 'vue3-autocomplete/dist/vue3-autocomplete.css'

export default {
    name: 'YourComponentName',
    components: {
        Autocomplete
    }
}

Use the component into your template.

<template>
    <div>
        <Autocomplete
            @input="getItems"
            :results="items"
        ></Autocomplete>
    </div>
</template>

Properties

Property	Type	Description	Required	Default
results	Array	Items to display in the results list	No	[]
display-item	Function	Describes how to render each item in results	No	return item.name
debounce	Integer	Time to wait before each call to the @input event	No	0
max	Integer	Define a render limit for results items	No	10
input-class	Array	Override input default classes	No	[]
results-container-class	Array	Override results container default classes	No	[]
results-item-class	Array	Override results item default classes	No	[]

Events

Event	Description
@input	Triggered on user input, should update the local results list

License

MIT