vue3-autocomplete

* Installation * Usage
10,928 31
Install
npm install vue3-autocomplete
Latest Version:1.0.4
Vue:3
Last Updated:Feb 16, 2022
Links: GitHub  ·  npm
Maintainer: takachi67

vue3-autocomplete

Table of contents

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

Related Packages

vue-search-select

A Vue.js search select form component

448,293 407
vue-search-select-css

A Vue.js search select form component that allows css customizations (based on v...

1,602 1
vue-advanced-search

Features: * Autocomplete search * Single select * Multiple select

8,693 11
@trevoreyre/autocomplete

Simple autocomplete component in vanilla JS and Vue

62,090 437
vue3-typeahead-input

A simple Vue 3 type-ahead input component that shows a list of suggested items b...

1,924 3

Version History

Version Released Vue License
1.0.4 ^3.0.0
1.0.3 ^3.0.0
1.0.2 ^3.0.0
1.0.1 ^3.0.0
1.0.0 ^3.0.0