0.9.0 • Public • Published


Travis Build Version Coveralls github Downloads

A Vue autocomplete component

npm install vuejs-auto-complete --save


Installation, add autocomplete component into your app

import Vue from 'vue'
import Autocomplete from 'vuejs-auto-complete'
new Vue({
  components: {

Api data source


Object data source


Full featured example

  placeholder="Search Distribution Groups"
// parent component
computed: {
  authHeaders () {
    return {
      'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'
methods: {
  distributionGroupsEndpoint (input) {
    return process.env.API + '/distribution/search?query=' + input
  addDistributionGroup (group) { = group
    // access the autocomplete component methods from the parent
  authHeaders () {
    return {
      'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'
  formattedDisplay (result) {
    return + ' [' + result.groupId + ']'

Available props

Prop Type Required Default Description
source String|Function|Object|Array true data source for the results
method String 'get' http method for api requests
placeholder String 'Search' input placeholder
initialValue String|Number starting value
initialDisplay String starting display value
inputClass String|Object css class for the input div
disableInput Boolean to disable the input
name String name attribute for the value input
resultsFormatter Function<Object[]> Function to format the server data. Should return an array of objects with id and name properties
resultsProperty String property api results are keyed under
resultsValue String 'id' property to use for the value
resultsDisplay String|Function 'name' property to use for the display or custom function
requestHeaders Object extra headers appended to the request
showNoResults Boolean true To show a message that no results were found
clearButtonIcon String Optionally provide an icon css class
maxlength Number Optional max input length

Available events

Event Output Description
results Object Results returned from a search
noResults Object When no results are returned
selected Object When an item is selected
input String|Number The value when an item is selected
clear When selected results are cleared
close When the options list is closed
enter String Emits the input value when enter is pressed
nothingSelected String Emits the input value when enter is pressed and nothing was selected

Available Slots

Slot Description
firstResult list item placed before all results
lastResult list item placed at the end of the results
noResults list item shown when no results are present

Package Sidebar


npm i vuejs-auto-complete

Weekly Downloads






Unpacked Size

291 kB

Total Files


Last publish


  • charliekassel