rdr-autocomplete

rdr-autocomplete

---

Autocomplete component for Vue.js

Installation

Using npm

npm i --save rdr-autocomplete

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'

import RdrAutocomplete from 'rdr-autocomplete'

Vue.use(RdrAutocomplete)

Example

<template>
    <rdr-autocomplete
        :label="'Label'"
        :labelClass="'Label-class'"
        :placeholder="'Placeholder input'"
        :inputClass="classes"
        :items="autocompleteItems"
        v-model="autocompleteValue"
    />
</template>

<script>
export default {
  data () {
    return {
      autocompleteItems: ['Aa', 'Bb', 'Cc', 'Ab', 'Ac']
    }
  },
}
</script>

Properties

Name	Type	Required	Default value	Info
inputId	String	No	input- + 'Random Nr'	Chain label to input
labelClass	String	No		Label Class
label	String	No		Label name
inputClass	String or Object	No		Input Class
placeholder	String	No		Input placeholder
inputType	String	No	Search	Input type (text/search/email/etc..
items	Array	Yes		Array which contains the autocomplete items

Events

Name	Params	Info
onChange	item: Item changed	Triggered after any changed in the model
keyEnter	item: Item selected	Like @input, but only when has value
blur	text: Text of search input	Triggered on blur in the search input
focus	text: Text of search input	Triggered on focus in the search input

Authors

• Ronald de Rooij

License

This project is licensed under MIT License