Description:
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; }, },
4. Event handlers.
- @selectItem
- @onInput
- @onFocus
- @onBlur
Preview:
Changelog:
v1.0.5 (12/22/2021)
- Added a defaultItem prop to preselect an item from the list.
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