vue3-typeahead-input

vue3-typeahead-input

A simple Vue 3 type-ahead input component that shows a list of suggested items based on the user input

Demo

• Example page

Installation

Using npm

npm install vue3-typeahead-input

Using yarn

yarn add vue3-typeahead-input

Usage

Import vue3-typeahead-input component globally. You can import default CSS of the component if you want.

import App from './App.vue';
import TypeaheadInput from 'vue3-typeahead-input';
import 'vue3-typeahead-input/dist/style.css'; //Optional default CSS

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

...Or import vue3-typeahead-input component locally in component you want.

import TypeaheadInput from 'vue3-typeahead-input'
import 'vue3-typeahead-input/dist/style.css'; //Optional default CSS

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

Use component in template

<template>
    <div>
        <TypeaheadInput
            :items="items"
            v-model="selectedItem">
        </TypeaheadInput>    
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    
    const items = [
        {
            text:'Item 1',
            value: 'item-1'
        },
        {
            text:'Item 2',
            value: 'item-2'
        },
        {
            text:'Item 3',
            value: 'item-3'
        },
    ]
    const selectedItem = ref('item-3')
</script>

Properties

Fallthrough attributes

All attributes added to the component not provided above fallthrough the input control. For example, placeholder, maxlength... or input events @input, @focus...Check out more details at the demo

Events

Slot

Exposed