Autocomplete-vue

autocomplete-vue is a vue component build with webpack If you want to include the .vue file instead of a compiled webpack js file you can require/import the file at autocomplete-vue/src/js/autocomplete-vue.vue.

Installation

autocomplete-vue requires this.$http to be availble in your vue componentes. You can use axios or vue-resource. Axios is part of the peerDependencies because that is what vue.js currently recommends.

npm install --save autocomplete-vue axios

Usage

A demo is available in demo/demo.html.

Initialize Autocomplete-vue

import AutocompleteVue from 'autocomplete-vue';

Vue.component('autocomplete-vue', AutocompleteVue);

Use the Component

<autocomplete-vue
    :list="[{name: 'item1'}, {name: 'item2'}, {name: 'item3'}]"
    placeholder="Autocomplete"
></autocomplete-vue>

<autocomplete-vue
    classPrefix="my-custom-class"
    url="/my-list/all"
    requestType="get"
></autocomplete-vue>

<autocomplete-vue
    v-model="input"
    url="/countries/all"
    requestType="get"
    property="capital"
    :required="true"
    :threshold="1"
></autocomplete-vue>

<autocomplete-vue
    url="/important/all"
    requestType="post"
    :ignoreCase="false"
></autocomplete-vue>

Listen to the "select" event on the element itself

<autocomplete-vue v-on:selected="method" />

or import the event bus separately

import { autocompleteBus } from 'autocomplete-vue';

autocompleteBus.$on('autocomplete-select', function (selectedValue) {
  // do something
});

Properties

classPrefix

Sets prefix for the styling class (override)

• type: String
• required: false
• default: 'autocomplete

url

An url to load the list from

• type: String
• required: false

requestType

The request type for the url

• type: String
• required: false
• default: 'get'

list

A list of objects that the input should be compared to

• type: Array
• required: false

property

The property in the list that the autocomplete will compare

• type: String
• required: false
• default: 'name'

placeholder

A placeholder text for the input field

• type: String
• required: false

inputClass

Specifies a class for the input field

• type: String
• required: false

required

If the input field is required when submitting a form

• type: Boolean
• required: false
• default: false

ignoreCase

If set to false, the autocomplete will be case sensitive ('a' doesn't match 'A')

• type: Boolean
• required: false
• default: true

threshold

The number of characters required for the autocomplete-list to show Setting a negative number will make the list visible all the time (with focus)

• type: Number
• required: false
• default: 0

value

The value that is set when using v-model on the component

• required: false

autoHide

If the suggestions-box should hide itself after an entry is selected

• type: Boolean
• required: false
• default: true