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