1.1.0 • Published 3 years ago

vue-autocomplete-component v1.1.0

Weekly downloads
46
License
ISC
Repository
github
Last release
3 years ago

🎯 install

$ yarn add vue-autocomplete-component
# npm install vue-autocomplete-component --save

🚀 Usage

<template>
  <Autocomplete
    :options="[
      { value: 'david', label: 'David' },
      { value: 'clement', label: 'Clement' },
      { value: 'leo', label: 'Leo' },
    ]"
    :searchApi="
      'https://5e0deade36b80000143db93c.mockapi.io/get-options?search'
    "
    :defaultValue="3"
    :items="3"
    :onSearchComplete="onSearchComplete"
    :onSearchError="onSearchError"
    :onSelect="onSelect"
    :onOpen="onOpen"
    :onClose="onClose"
    :transformResult="transformResult"
  />
</template>

<script>
import { Autocomplete } from "vue-autocomplete-component";

export default {
  components: {
    Autocomplete,
  },
  methods: {
    onSearchComplete: function() {
      console.log("onSearchComplete");
    },
    transformResult: function(values) {
      console.log("transformResult with values is: ", values);
    },
    onSearchError: function(err) {
      console.log("onSearchError with error is: ", err);
    },
    onSelect: function(value) {
      console.log("onSelect with value is: ", value);
    },
    onOpen: function() {
      console.log("onOpen");
    },
    onClose: function() {
      console.log("onClose");
    },
  },
};
</script>

Props

Prop nameProp typeDescription
optionsArrayThe options to display in the dropdown menu, default is array object with required keys are "value" and "label"
searchApiStringApi url to search when input typing
defaultValueString, Numberinitital value for dropdown
onSearchCompleteFunchandle when search api completed
onSearchErrorFunchandle when search api error
onSelectFunchandle when a item selected
onOpenFunchandle when dropdown is opened
onCloseFunchandle when dropdown is closed
transformResultFunchandle when data dropdown is change
placeholderTextStringcustom placeholder input
loadingTextStringcustom loading text
itemsNumberHow many results to show at once (only for screen width > 768px)
1.1.0

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago