https://github.com/workindia/search-select
SearchSelect: A searchable dropdown library
https://github.com/workindia/search-select
autocomplete dropdown javascript-library search searchable
Last synced: 5 months ago
JSON representation
SearchSelect: A searchable dropdown library
- Host: GitHub
- URL: https://github.com/workindia/search-select
- Owner: workindia
- License: mit
- Created: 2020-03-05T16:46:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-10-28T11:56:33.000Z (over 4 years ago)
- Last Synced: 2024-08-09T22:09:12.065Z (almost 2 years ago)
- Topics: autocomplete, dropdown, javascript-library, search, searchable
- Language: JavaScript
- Homepage:
- Size: 271 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Search-Select
SearchSelect: A searchable dropdown library.
## Installation and usage
### Installation
Download search-select using below methods.
1. Git Release
```sh
https://github.com/workindia/search-select/releases
```
2. CDN
```sh
https://cdn.jsdelivr.net/gh/workindia/search-select@1.0.0/search-select.js
```
3. NPM
```sh
npm i search-select-js
```
### Usage
Add search-select to your page:
```html
```
You can create a hidden input with class `Search-Select--Hidden-Input` which will be used to create a search-select dropdown:
```html
```
To initialize search-select dropdown, add following to your javascript:
```javascript
const searchSelectDropdown = new SearchSelect('#dropdown-input', {
data: ['item1', 'item2', 'item3', 'item4'],
filter: SearchSelect.FILTER_CONTAINS,
sort: undefined,
inputClass: 'form-control mobile-field',
maxOpenEntries: 9,
searchPosition: 'top',
onInputClickCallback: function(ev) { console.log('Input Clicked') },
onInputKeyDownCallback: function(ev) { console.log('Input Key Down') },
});
```
Search-select will set selected value to the hidden input (`#dropdown-input`). Selected value can be retrieved from the hidden input. Change event listener can be applied to the hidden input to watch any change in the value.
```javascript
// Get selected value
const selectedValue = document.getElementById('dropdown-input').value;
// Add change listner
document.getElementById('dropdown-input').addEventListner('change', function(ev) { console.log('Value changed'); })
```
## Configuration Parameters
- `data` - Input data for dropdown
- `filter` - Filter criteria for dropdown search
- `sort` - Sort criteria for dropdown items
- `inputClass` - Custom class to be applied to the visible input
- `maxOpenEntries` - Maximum number of items visible when dropdown is open
- `searchPosition` - Position of search bar input
- `dropdownPosition` - Position of dropdown
- `onInputClickCallback` - Event called when search-select input is clicked
- `onInputKeyDownCallback` - Event called when a key is pressed in search bar
## Methods
- `openDropdown(focus)` - Open dropdown. Pass `focus=true` if to set focus on search bar
- `closeDropdown()` - Close dropdown.
- `setData(data)` - Set dropdown list data.
## License
[](LICENSE)