https://github.com/0xm4ze/search-dropdown-vue
An easier way to display A Vue.js dropdown component with search
https://github.com/0xm4ze/search-dropdown-vue
dropdown search searchable searchlist searchselect vue
Last synced: 12 months ago
JSON representation
An easier way to display A Vue.js dropdown component with search
- Host: GitHub
- URL: https://github.com/0xm4ze/search-dropdown-vue
- Owner: 0xm4ze
- License: mit
- Created: 2022-01-22T14:59:28.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-22T14:23:25.000Z (over 1 year ago)
- Last Synced: 2025-06-09T08:43:04.445Z (about 1 year ago)
- Topics: dropdown, search, searchable, searchlist, searchselect, vue
- Language: Vue
- Homepage:
- Size: 23.4 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
$ npm install search-dropdown-vue
// OR
$ yarn add search-dropdown-vue
```
# Requirements
- [Vue.js](https://github.com/vuejs/vue-next) `^3.0.0`
# Usage
```html
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
```
# 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](http://opensource.org/licenses/MIT)