{"id":15419268,"url":"https://github.com/auhau/select-picker","last_synced_at":"2026-03-14T04:35:19.541Z","repository":{"id":58242524,"uuid":"44366397","full_name":"AuHau/select-picker","owner":"AuHau","description":"jQuery plugin for multiselect tag-like picker -","archived":false,"fork":false,"pushed_at":"2020-02-25T10:40:27.000Z","size":284,"stargazers_count":24,"open_issues_count":6,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-28T10:25:21.882Z","etag":null,"topics":["jquery-plugin","multi-select","picker"],"latest_commit_sha":null,"homepage":"http://picker.uhlir.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AuHau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-16T06:24:34.000Z","updated_at":"2023-01-27T23:57:09.000Z","dependencies_parsed_at":"2022-08-31T00:41:07.958Z","dependency_job_id":null,"html_url":"https://github.com/AuHau/select-picker","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AuHau%2Fselect-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AuHau%2Fselect-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AuHau%2Fselect-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AuHau%2Fselect-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AuHau","download_url":"https://codeload.github.com/AuHau/select-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251293400,"owners_count":21566092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery-plugin","multi-select","picker"],"created_at":"2024-10-01T17:24:35.690Z","updated_at":"2026-03-14T04:35:19.463Z","avatar_url":"https://github.com/AuHau.png","language":"JavaScript","readme":"# Select Picker\r\n\r\n[![Build Status](https://travis-ci.org/AuHau/select-picker.svg?branch=master)](https://travis-ci.org/AuHau/select-picker) [![npm version](https://badge.fury.io/js/select-picker.svg)](https://badge.fury.io/js/select-picker) [![Bower version](https://badge.fury.io/bo/select-picker.svg)](https://badge.fury.io/bo/select-picker)\r\n\r\nSelect Picker is jQuery plugin for multiselect tag-like picker.\r\n\r\nExtensive documentation, with examples can be found on [picker.adam-uhlir.me](http://picker.adam-uhlir.me).\r\n\r\n## Installation\r\n\r\n### Direct\r\n\r\nTo include Select Picker directly to your project, download its files from [https://github.com/AuHau/select-picker/archive/master.zip](here)\r\nand include them as follow:\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"path/to/file/picker.min.css\"\u003e\r\n\u003cscript type=\"text/javascript\" src=\"path/to/file/picker.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n### Bower\r\n\r\nSelect Picker is registered in Bower register, therefore you can use it as dependency:\r\n\r\n```\r\nbower install select-picker --save\r\n```\r\n\r\n### NPM\r\n\r\nSelect Picker is also registered in npm register, therefore you can use it as dependency:\r\n```\r\nnpm install select-picker --save\r\n```\r\n\r\n## Basic usage\r\n\r\n### Basic Picker\r\n\r\nBasic Picker mimic standard select box. It will loads first option as selected one,\r\ntherefore if you want to have a placeholder in your Picker use the first option as placeholder. \r\nPicker also supports `hidden` attribute, therefore if you don't want to have\r\nplaceholder in the list of options, use it with your placeholder option.\r\n        \r\n```html\r\n\u003cselect name=\"basic\" id=\"ex-basic\"\u003e\r\n    \u003coption value=\"\" disabled hidden\u003eSelect value\u003c/option\u003e\r\n    \u003coption value=\"1\"\u003eNice\u003c/option\u003e\r\n    \u003coption value=\"2\"\u003eVery nice\u003c/option\u003e\r\n    \u003coption value=\"3\"\u003eAwesome\u003c/option\u003e\r\n    \u003coption value=\"4\"\u003eGodlike\u003c/option\u003e\r\n\u003c/select\u003e\r\n\u003cscript type=\"text/javascript\"\u003e\r\n    $('#ex-basic').picker();\r\n\u003c/script\u003e\r\n```\r\n\r\n### Multi-selection \r\n\r\nMain purpose why Picker was developed was for tags selection. You can enable this\r\nfeature really easily. Picker is smart enough to detects presence of `multiple`\r\nattribute with select tag and base on this presence enables multiple selection.\r\nOf course you can always override this in options when initializing Picker.\r\n\r\n```html\r\n\u003cselect name=\"basic\" id=\"ex-search\" multiple\u003e\r\n    \u003coption value=\"1\"\u003eShanghai\u003c/option\u003e\r\n    \u003coption value=\"2\"\u003eKarachi\u003c/option\u003e\r\n    \u003coption value=\"3\"\u003eBeijing\u003c/option\u003e\r\n    \u003coption value=\"4\"\u003eTianjin\u003c/option\u003e\r\n    \u003coption value=\"5\"\u003eIstanbul\u003c/option\u003e\r\n    \u003coption value=\"6\"\u003eLagos\u003c/option\u003e\r\n    \u003coption value=\"7\"\u003eTokyo\u003c/option\u003e\r\n    \u003coption value=\"8\"\u003eGuangzhou\u003c/option\u003e\r\n    \u003coption value=\"9\"\u003eMumbai\u003c/option\u003e\r\n    \u003coption value=\"10\"\u003eMoscow\u003c/option\u003e\r\n    \u003coption value=\"11\"\u003eDhaka\u003c/option\u003e\r\n    \u003coption value=\"12\"\u003eCairo\u003c/option\u003e\r\n\u003c/select\u003e\r\n\u003cscript type=\"text/javascript\"\u003e\r\n    $('#ex-search').picker();\r\n\u003c/script\u003e\r\n```\r\n\r\n**More examples and documentation can be found on [picker.adam-uhlir.me](http://picker.adam-uhlir.me).**\r\n\r\n## Contribution\r\n\r\nIf you would like to contribute, you are very much welcome! Just please always write test coverage \r\nand properly document your changes in documentation.\r\n\r\n### Tests\r\n\r\nCurrently for tests I am using Karma + Jasmine. To run the tests, first install dependencies with `npm install` and \r\nthen to simply run `npm test`. This will run test in headless browser (PhantomJS). You can run the tests in Chrome\r\nusing `npm run test-chrome` or if you need to debug your test `npm run test-debug`.\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauhau%2Fselect-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fauhau%2Fselect-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauhau%2Fselect-picker/lists"}