tal7aouy / search-dropdown-vue

An easier way to display A Vue.js dropdown component with search

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