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
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src/js
test
.babelrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
karma.conf.js
package.json
webpack.config.js
yarn.lock

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 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