Simple Typeahead Component For Vue 3

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:

Simple Typeahead Component For Vue 3

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

Add Comment