vue3-simple-typeahead

vue3-simple-typeahead

A Vue3 component for a simple typeahead component. It will show a list of suggested items based on the user input.

The component includes it's own input and when the user types on it (at least two characters) the suggested options appear.

Demo

//Pending

Installation

NPM

npm install vue3-simple-typeahead

Browser

You can also use the browser bundle in a script tag.

<script src="https://unpkg.com/vue3-simple-typeahead"></script>

Usage

Import the vue3-simple-typeahead component and register it globally in your Vue app. Import the CSS as well if you wish to use the default styling.

import { createApp } from 'vue';
import App from './App.vue';
import SimpleTypeahead from 'vue3-simple-typeahead';
import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css'; //Optional default CSS

let app = createApp(App);
app.use(SimpleTypeahead);
app.mount('#app');

You can also import vue3-simple-typeahead locally in your component if you prefer.

import SimpleTypeahead from 'vue3-simple-typeahead'
import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css' //Optional default CSS

export default {
  name: 'my-vue-component',
  ...
  components: {
    SimpleTypeahead
  }
  ...
}

Then, use the component in your app.

<vue3-simple-typeahead
	id="typeahead_id"
	placeholder="Start writing..."
	:items="['One','Two','Three',...]"
	@selectItem="selectItemEventHandler"
	@onInput="onInputEventHandler"
	@onFocus="onInputEventHandler"
	@onBlur="onInputEventHandler"
>
</vue3-simple-typeahead>

Props

Prop	Type	Default	Description
id	String	Random id generation	The id for the input control. Can be useful to link with a label for=""
placeholder	String	''	Placeholder text for the input
items	Array (Required)		List of strings with the elements for suggestions

Events

Event	Signature	Description
selectItem	function (item: String): void	Emitted when the user selects an item from the suggestion list
onInput	function (input: String): void	Emitted when the user types anything
onFocus	function (input: String): void	Emitted when the input control get the focus
onBlur	function (input: String): void	Emitted when the input control lost the focus [When the user select an item, the focus is lost too]