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

| Property | Type | Description | Default | |---|---|---|---| | items | Array | An array of objects or array of primary types like string or number. It will look for a text and value keys. This can be changed using the item-text, item-value | [] | | item-text | string | Set property of items’s text value | text | | item-value | string | Set property of items’s value. In case skip-item-value is true the value will be used to set option item key | value | | skip-item-value | boolean | Get whole object item as a value | | label | string | Label of typeahead input | undefined | | value | any | Value of typeahead input | undefined | | readonly | boolean | Set state of input is readonly | undefined | | disabled | boolean | Set state of input is disabled, it's similar to readonly props but has different style | undefined | | value | any | Value of typeahead input | undefined | | emptyMessage| string | Display message when there is no data | No data available |

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

| Name | Description | | ---- | ----------- | | @change | Emitted when the input is changed by user interaction | | @update:modelValue | The updated bound model |

Slot

| Name | Description | | ---- | ----------- | | option-item | Define a custom option item appearance v-slot:option-item={item, value} |

Exposed

| Name | Description | | ---- | ----------- | | input | Input element |