An autocomplete component written for vue 2+
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
src/js change to webpack only, add autoHide property, add eventbus (#4) Mar 29, 2017
test add autohide tests (#5) Apr 12, 2017
.babelrc clean up testing system Mar 19, 2017
.gitignore
.npmignore
.travis.yml Add autocomplete-component (#1) Feb 22, 2017
LICENSE
README.md update vue-resource for dev; add axios as peer; add readme for $http Sep 12, 2017
karma.conf.js clean up testing system Mar 19, 2017
package.json update vue-resource for dev; add axios as peer; add readme for $http Sep 12, 2017
webpack.config.js change to webpack only, add autoHide property, add eventbus (#4) Mar 29, 2017
yarn.lock update vue-resource for dev; add axios as peer; add readme for $http Sep 12, 2017

README.md

Build Status License: MIT npm npm

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

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