Simple Typeahead Component For Vue 3

Install & Download:

# NPM
$ npm i vue3-simple-typeahead

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;
  },
},
minItemLength: {
  type: Number,
  default: 0,
  validator: (prop) => {
    return prop >= 0;
  },
},
selectOnTab: {
  type: Boolean,
  default: true,
},

4. Event handlers.