https://github.com/auhau/select-picker
jQuery plugin for multiselect tag-like picker -
https://github.com/auhau/select-picker
jquery-plugin multi-select picker
Last synced: about 1 month ago
JSON representation
jQuery plugin for multiselect tag-like picker -
- Host: GitHub
- URL: https://github.com/auhau/select-picker
- Owner: AuHau
- License: mit
- Created: 2015-10-16T06:24:34.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-02-25T10:40:27.000Z (about 6 years ago)
- Last Synced: 2025-04-28T10:25:21.882Z (12 months ago)
- Topics: jquery-plugin, multi-select, picker
- Language: JavaScript
- Homepage: http://picker.uhlir.dev
- Size: 277 KB
- Stars: 24
- Watchers: 4
- Forks: 18
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Select Picker
[](https://travis-ci.org/AuHau/select-picker) [](https://badge.fury.io/js/select-picker) [](https://badge.fury.io/bo/select-picker)
Select Picker is jQuery plugin for multiselect tag-like picker.
Extensive documentation, with examples can be found on [picker.adam-uhlir.me](http://picker.adam-uhlir.me).
## Installation
### Direct
To include Select Picker directly to your project, download its files from [https://github.com/AuHau/select-picker/archive/master.zip](here)
and include them as follow:
```html
```
### Bower
Select Picker is registered in Bower register, therefore you can use it as dependency:
```
bower install select-picker --save
```
### NPM
Select Picker is also registered in npm register, therefore you can use it as dependency:
```
npm install select-picker --save
```
## Basic usage
### Basic Picker
Basic Picker mimic standard select box. It will loads first option as selected one,
therefore if you want to have a placeholder in your Picker use the first option as placeholder.
Picker also supports `hidden` attribute, therefore if you don't want to have
placeholder in the list of options, use it with your placeholder option.
```html
Select value
Nice
Very nice
Awesome
Godlike
$('#ex-basic').picker();
```
### Multi-selection
Main purpose why Picker was developed was for tags selection. You can enable this
feature really easily. Picker is smart enough to detects presence of `multiple`
attribute with select tag and base on this presence enables multiple selection.
Of course you can always override this in options when initializing Picker.
```html
Shanghai
Karachi
Beijing
Tianjin
Istanbul
Lagos
Tokyo
Guangzhou
Mumbai
Moscow
Dhaka
Cairo
$('#ex-search').picker();
```
**More examples and documentation can be found on [picker.adam-uhlir.me](http://picker.adam-uhlir.me).**
## Contribution
If you would like to contribute, you are very much welcome! Just please always write test coverage
and properly document your changes in documentation.
### Tests
Currently for tests I am using Karma + Jasmine. To run the tests, first install dependencies with `npm install` and
then to simply run `npm test`. This will run test in headless browser (PhantomJS). You can run the tests in Chrome
using `npm run test-chrome` or if you need to debug your test `npm run test-debug`.