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 | | placeholder | String | Default input placeholder | No | '' | | use-html-for-results | Boolean | If true, displayItem method will display results as html | No | false | | 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 | | @onSelect | Triggered when user click on a list item and return the selected item |

License

MIT