ssolders/vuejs-autocomplete

Autocomplete component for Vue js

vuejs-auto-complete

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 () {
    return process.env.API + '/distribution/search?query='
  },
  addDistributionGroup (group) {
    this.group = group
    // access the autocomplete component methods from the parent
    this.$refs.autocomplete.clearValues()
  },
  authHeaders () {
    return {
      'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1Ni....'
    }
  },
  formattedDisplay (result) {
    return result.name + ' [' + result.groupId + ']'
  }
}

Available props

Prop	Type	Required	Default	Description
source	String|Func|Object|Array		true	data source for the results
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
resultsProperty	String			property api results are keyed under
resultsValue	String		'id'	property to use for the value
resultsDisplay	String		'name'	property to use for the display
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

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, Event	The value when an item is selected
handleInput	String|Number	The value + event on keyup
clear		When selected results are cleared
close		When the options list is closed
enter	String	Emits the input value when enter is pressed