Skip to content
Autocomplete component for Vue js
Branch: master
Clone or download
Charlie Kassel
Charlie Kassel 0.9.0
Latest commit 6feca77 Nov 6, 2018

README.md

vuejs-auto-complete

Travis Build Version Coveralls github Downloads

A Vue autocomplete component

npm install vuejs-auto-complete --save

Usage

Installation, add autocomplete component into your app

import Vue from 'vue'
import Autocomplete from 'vuejs-auto-complete'

new Vue({
  //...
  components: {
    Autocomplete,
  },
  //...
})

Api data source

<autocomplete
  source="https://api.github.com/search/repositories?q="
  results-property="items"
  results-display="full_name">
</autocomplete>

Object data source

<autocomplete
  :source="[{id:1,name:'abc'},{id:2,name:'def'}]">
</autocomplete>

Full featured example

<autocomplete
  ref="autocomplete"
  placeholder="Search Distribution Groups"
  :source="distributionGroupsEndpoint"
  input-class="form-control"
  results-property="data"
  :results-display="formattedDisplay"
  :request-headers="authHeaders"
  @selected="addDistributionGroup">
</autocomplete>
// parent component
computed: {
  authHeaders () {
    return {
      'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'
    }
  },
},
methods: {
  distributionGroupsEndpoint (input) {
    return process.env.API + '/distribution/search?query=' + input
  },
  addDistributionGroup (group) {
    this.group = group
    // access the autocomplete component methods from the parent
    this.$refs.autocomplete.clear()
  },
  authHeaders () {
    return {
      'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'
    }
  },
  formattedDisplay (result) {
    return result.name + ' [' + 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
You can’t perform that action at this time.