A simple and lightweight Vue3 typeahead/autocomplete component that shows a suggested list of elements while the user types in.
How to use it:
1. Import and register the component.
// globally
import { createApp } from 'vue';
import App from './App.vue';
import SimpleTypeahead from 'vue3-simple-typeahead';
import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css';
let app = createApp(App);
app.use(SimpleTypeahead);
app.mount('#app');
// locally
import SimpleTypeahead from 'vue3-simple-typeahead'
import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css'
export default {
name: 'my-vue-component',
components: {
SimpleTypeahead
}
}
2. Add the <vue3-simple-typeahead /> component to the app.
<vue3-simple-typeahead id="demo" placeholder="Type Something..." :items="['Vue','Script','Com',...]" :minInputLength="1" :itemProjection="itemProjectionFunction" @selectItem="selectItemEventHandler" > </vue3-simple-typeahead>
3. Default component props.
id: {
type: String,
},
placeholder: {
type: String,
default: '',
},
items: {
type: Array,
required: true,
},
defaultItem: {
default: null,
},
itemProjection: {
type: Function,
default(item) {
return item;
},
},
minInputLength: {
type: Number,
default: 2,
validator: (prop) => {
return prop >= 0;
},
},
minItemLength: {
type: Number,
default: 0,
validator: (prop) => {
return prop >= 0;
},
},
selectOnTab: {
type: Boolean,
default: true,
},
4. Event handlers.
- @selectItem
- @onInput
- @onFocus
- @onBlur
Preview:
Changelog:
v1.0.11 (09/11/2022)
- Added new prop minItemLength
v1.0.10 (08/23/2022)
- Added a new prop selectOnTab.
v1.0.9 (07/21/2022)
- Added methods acceisble by refs to play with the input control.
v1.0.7 (06/16/2022)
- All attributes added to the component not provided by props fallthrough the input control.
Download Details:
Author: frikinside
Live Demo: https://vue3-simple-typeahead-demo.netlify.app/
Download Link: https://github.com/frikinside/vue3-simple-typeahead/archive/refs/heads/master.zip
Official Website: https://github.com/frikinside/vue3-simple-typeahead
Install & Download:
# NPM
$ npm i vue3-simple-typeahead