Non Programming Manager

    vuejs-auto-complete-with-abort

    0.9.1 • Public • Published

    vuejs-auto-complete

    Travis Build Version Coveralls github Downloads

    A Vue autocomplete component Forked from https://github.com/charliekassel/vuejs-autocomplete Added fetch abort when theres another request, remove click searching, disabled focus clearing

    npm install vuejs-auto-complete-with-abort --save

    Usage

    Installation, add autocomplete component into your app

    import Vue from 'vue'
    import Autocomplete from 'vuejs-auto-complete-with-abort'
     
    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

    Prop Type Required Default Description
    source String|Function|Object|Array true data source for the results
    method String 'get' http method for api requests
    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
    resultsFormatter Function<Object[]> Function to format the server data. Should return an array of objects with id and name properties
    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

    Install

    npm i vuejs-auto-complete-with-abort

    DownloadsWeekly Downloads

    4

    Version

    0.9.1

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    4

    Last publish

    Collaborators

    • tonz341