vue-autocomplete-ele

vue-autocomplete-ele

Table of Contents

• Introduction
• Features
• Installation
• Usage
• Configuration
• Example
• References

Introduction

vue-autocomplete-ele is an Vue component completion suggester.
vue-autocomplete-ele is a MIT-licensed open source project, it is an autcomplete element for your Vue Project which do not use or depends on any third party library.
Tested in Firefox, Safari, Chrome, Opera, Internet Explorer 8+. No dependencies, written in plain JavaScript. vue-autocomplete-ele is lightweight and Highly configurable which makes its useful in number of situations.

Features

• Lightweight.
• No jQuery, written in vanilla JS.
• Smart caching, delay and minimum character settings.
• Callbacks

Installation

npm install vue-autocomplete-ele

Usage

import VueAutocompleteEle from 'vue-autocomplete-ele';

Configuration

Prop	Type	Default	Description
src	Object		{ data: Array, valueIndex: String <from data>, labelIndex: String <from data>}
id	String	vue-autocomplete
minChars	Number	0	Minimum number of characters (>=1) a user must type before a search is performed.
delay	Number	0	The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay is more responsive, but can produce a lot of load.
offsetLeft	Number	1	Optional left offset of the suggestions container.
offsetTop	Number	1	Optional top offset of the suggestions container.
inputClass	String		Custom class/es that get/s added to the input element.
containerClass	String		Custom class/es that get/s added to the dropdown menu container.
suggestionClass	String		Custom class/es that get/s added to the dropdown menu.
noCache	Boolean	false	Determines if performed searches should be cached.
sourceHandler	Function		The sourceHandler function iterates through an array of (local) choices and we return a new array containing all (lowercased) matches.
renderHandler	Function		The renderHandler function allows to customize the dropdown menu item
onSelectHandler	Function		The onSelectHandler function allows to do something on select event

Example

<vue-autocomplete-ele
    :src="{
        data: [
            {
                'id': 125,
                'sku': 'AAAAAAAAAA',
            },
            {
                'id': 154,
                'sku': 'LIQ-01',
            },
            {
                'id': 186,
                'sku': 'SHEET-01',
            },
            {
                'id': 187,
                'sku': 'SHEET-02',
            }
        ],
        valueIndex: 'id',
        labelIndex: 'sku'
    }"
    @selected="autocomplete = $event" // returning data for valueIndex for selected item
/>

References

• Inspired from and wrap around https://github.com/Pixabay/JavaScript-autoComplete.