vuejs-auto-complete-without-autoclearing v0.10.0

vuejs-auto-complete but without the automatic clearing when not having selected something

A Vue autocomplete component

npm install vuejs-auto-complete-without-autoclearing --save

Usage

Installation, add autocomplete component into your app

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

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

Available events

Available Slots