🎯 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 name	Prop type	Description
options	Array	The options to display in the dropdown menu, default is array object with required keys are "value" and "label"
searchApi	String	Api url to search when input typing
defaultValue	String, Number	initital value for dropdown
onSearchComplete	Func	handle when search api completed
onSearchError	Func	handle when search api error
onSelect	Func	handle when a item selected
onOpen	Func	handle when dropdown is opened
onClose	Func	handle when dropdown is closed
transformResult	Func	handle when data dropdown is change
placeholderText	String	custom placeholder input
loadingText	String	custom loading text
items	Number	How many results to show at once (only for screen width > 768px)