Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vuejs-auto-complete with all npm packages installed. Try it out:

var vuejsAutoComplete = require("vuejs-auto-complete")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vuejs-auto-complete v0.9.0

A Vue autocomplete component


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

sourceString|Function|Object|Arraytruedata source for the results
methodString'get'http method for api requests
placeholderString'Search'input placeholder
initialValueString|Numberstarting value
initialDisplayStringstarting display value
inputClassString|Objectcss class for the input div
disableInputBooleanto disable the input
nameStringname attribute for the value input
resultsFormatterFunction<Object[]>Function to format the server data. Should return an array of objects with id and name properties
resultsPropertyStringproperty api results are keyed under
resultsValueString'id'property to use for the value
resultsDisplayString|Function'name'property to use for the display or custom function
requestHeadersObjectextra headers appended to the request
showNoResultsBooleantrueTo show a message that no results were found
clearButtonIconStringOptionally provide an icon css class
maxlengthNumberOptional max input length

Available events

resultsObjectResults returned from a search
noResultsObjectWhen no results are returned
selectedObjectWhen an item is selected
inputString|NumberThe value when an item is selected
clearWhen selected results are cleared
closeWhen the options list is closed
enterStringEmits the input value when enter is pressed
nothingSelectedStringEmits the input value when enter is pressed and nothing was selected

Available Slots

firstResultlist item placed before all results
lastResultlist item placed at the end of the results
noResultslist item shown when no results are present


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free