vuejs-autocomplete-custom

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