search-dropdown-vue

An easier way to display A Vue.js dropdown component with search, No special dependencies, no jquery, no tailwind.css, just VueJS and CSS magic.

Installation

$ npm install search-dropdown-vue
// OR
$ yarn add  search-dropdown-vue

Requirements

• Vue.js ^3.0.0

Usage

<SearchDropdown
   :options="countries"
    v-on:selected="onSelectedOption"
    v-on:filter="getDropdownValues"
>
</SearchDropdown>

<script setup>
  import SearchDropdown from 'search-dropdown-vue'
  import {reactive, ref} from 'vue
  const countries = ref([
      {id:1, name:'Morocco'},
      {id:2, name:'USA'},
      {id:3,name: "Canada"}
    ])
  let object = reactive({id:null, name: null})

  const onSelectedOption = (payload) => object = payload
</script>

Default values of props

| Property | Type | Default value | | ------------------- | :-----: | -------------------------: | | closeOnOutsideClick | boolean | true | | placeholder | string | 'Please select an option.' | | name | string | 'dropdown input.' | | disabled | boolean | false | | maxItem | number | 10 |

License

The MIT License