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

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

PropTypeRequiredDefaultDescription
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

EventOutputDescription
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

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

Metadata

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