search-dropdown-vue

An easier way to display A Vue.js dropdown component with search
3,631
Install
npm install search-dropdown-vue
Latest Version:1.0.3
License:MIT
Last Updated:Feb 5, 2023
Links: npm
Maintainer: tal7aouy

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

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

Related Packages

vue-dropdowns

An easier way to display select boxes using objects

26,262 97
vue-searchable-select

Pure Vue3 version of the 'searchable select box' widget

11,372 0
slim-select_2

Slim advanced select dropdown

2,800 1,332
slim-select-with-styles

Slim advanced select dropdown

1,642 1,332
fuzzy-searchbox

An accessible, screen reader friendly combobox with fuzzy searching

3,494 0

Version History

Version Released License
1.0.3 MIT
1.0.2 MIT