{"id":13547740,"url":"https://github.com/ktquez/pickout","last_synced_at":"2025-06-14T15:03:46.163Z","repository":{"id":57323855,"uuid":"53870958","full_name":"ktquez/pickout","owner":"ktquez","description":"Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped","archived":false,"fork":false,"pushed_at":"2017-08-11T03:48:06.000Z","size":86,"stargazers_count":90,"open_issues_count":6,"forks_count":16,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-24T08:36:11.942Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://ktquez.github.io/pickout/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ktquez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license-mit.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-14T16:05:38.000Z","updated_at":"2025-04-19T12:32:13.000Z","dependencies_parsed_at":"2022-08-31T00:01:23.899Z","dependency_job_id":null,"html_url":"https://github.com/ktquez/pickout","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/ktquez/pickout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fpickout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fpickout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fpickout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fpickout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ktquez","download_url":"https://codeload.github.com/ktquez/pickout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fpickout/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259835353,"owners_count":22918973,"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":[],"created_at":"2024-08-01T12:01:00.412Z","updated_at":"2025-06-14T15:03:46.135Z","avatar_url":"https://github.com/ktquez.png","language":"JavaScript","funding_links":[],"categories":["🚀 A series of exquisite and compact web page cool effects"],"sub_categories":["Other Effect"],"readme":"# pickout\nCool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped.\n\u003cbr\u003e**[DEMO PAGE](http://ktquez.github.io/pickout/)**\n\n---\n\nFor syntax of the previous version [click here](https://github.com/ktquez/pickout/tree/v1.3.3)\n\n---\n\n\n## How to use \n### npm\n\n```shell\nnpm install pickout --save\n```\n\n### bower\n\n```shell\nbower install pickout --save\n```\n\n### Inserting HTML\nInclude the style\n\n```html\n\u003clink rel=\"stylesheet\" href=\"./path/to/pickout.min.css\"\u003e\n...\n\u003c/head\u003e\n```\n\nInclude the script\n\n```html\n\u003cscript src=\"./path/to/pickout.min.js\"\u003e\u003c/script\u003e\n...\n\u003c/body\u003e\n```\n\n### Or Using CDN\nTaking advantage that cdn provides, you can use the [pickout in cdnjs](https://cdnjs.com/libraries/pickout) to include the files in your page:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/pickout/2.0.1/pickout.min.css\"\u003e\n...\n\u003c/head\u003e\n```\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/pickout/2.0.1/pickout.min.js\"\u003e\u003c/script\u003e\n...\n\u003c/body\u003e\n```\n\n## Example of block the select field\n\n```html\n\u003c!-- Normal use --\u003e\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"option\"\u003eOption:\u003c/label\u003e\n    \u003cdiv class=\"pk-form\"\u003e\n        \u003cselect name=\"option\" id=\"option\" class=\"option all\" placeholder=\"Select a option\"\u003e\n            \u003coption value=\"\"\u003e\u003c/option\u003e \u003c!-- If the check is not required, submit a default value empty --\u003e\n            \u003coption value=\"opt1\"\u003eOption 1\u003c/option\u003e\n            \u003coption value=\"opt2\"\u003eOption 2\u003c/option\u003e\n            \u003coption value=\"opt3\"\u003eOption 3\u003c/option\u003e\n            \u003coption value=\"opt4\"\u003eOption 4\u003c/option\u003e\n        \u003c/select\u003e       \n    \u003c/div\u003e\n\u003c/div\u003e\n\n\n\u003c!-- Using with icons --\u003e\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"suit\"\u003eSuit:\u003c/label\u003e\n    \u003cdiv class=\"pk-form\"\u003e\n        \u003cselect name=\"suit\" id=\"suit\" class=\"suit all\" placeholder=\"Select a suit\"\u003e\n            \u003coption value=\"\"\u003e\u003c/option\u003e \u003c!-- If the check is not required, submit a default value empty --\u003e\n            \u003coption data-icon=\"\u0026spades;\" value=\"Spade\"\u003eSpade\u003c/option\u003e\n            \u003coption data-icon=\"\u0026clubs;\" value=\"Club\"\u003eClub\u003c/option\u003e\n            \u003coption data-icon=\"\u0026hearts;\" value=\"Heart\"\u003eHeart\u003c/option\u003e\n            \u003coption data-icon=\"\u0026diams;\" value=\"Diamond\"\u003eDiamond\u003c/option\u003e\n        \u003c/select\u003e \n    \u003c/div\u003e      \n\u003c/div\u003e\n```\n\n### Attributes\n`` data-icon `` : Icon code, for example: \"e602\", simply use ``data-icon=\"\u0026#xe602\"``;\n\n## Field selection with option group\n```html\n\u003c!-- Option group --\u003e\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"country\"\u003eCountry\u003c/label\u003e\n    \u003cdiv class=\"pk-form\"\u003e\n        \u003cselect name=\"country\" id=\"country\" class=\"country all\" placeholder=\"Select a Country\"\u003e\n            \u003coption value=\"\"\u003e\u003c/option\u003e \u003c!-- If the check is not required, submit a default value empty --\u003e\n            \u003coptgroup label=\"America\"\u003e\n                \u003coption value=\"EUA\"\u003eEUA\u003c/option\u003e\n                \u003coption value=\"Brazil\" selected\u003eBrazil\u003c/option\u003e\n                \u003coption value=\"Canada\"\u003eCanada\u003c/option\u003e                      \n            \u003c/optgroup\u003e\n            \u003coptgroup label=\"Europe\"\u003e\n                \u003coption value=\"Ireland\"\u003eIreland\u003c/option\u003e\n                \u003coption value=\"Spanish\"\u003eSpanish\u003c/option\u003e\n                \u003coption value=\"Italy\"\u003eItaly\u003c/option\u003e\n                \u003coption value=\"Portugal\"\u003ePortugal\u003c/option\u003e                      \n            \u003c/optgroup\u003e\n        \u003c/select\u003e \n    \u003c/div\u003e          \n\u003c/div\u003e\n```\n\n## Set the select\n\n```js\npickout.to('.country');\n```\n\nAnother option\n\n```js\npickout.to({\n  el: '.country'\n});\n```\n\n**OBS:** Do not forget to declare the characters responsible dial if class use (.) If ID using the (#)\n\n### Search field \nField to search options within the modal, default is false\n```js\npickout.to({\n  el: '.country',\n  search: true\n});\n```\n\n### Set all at once\nYou can assign to selects separately, however you can apply all at once, simply declare a class in common to all selects and inform the plugin, for example:\n\n```js\npickout.to('.all');\n```\n\n## Selecting multiple options\nSimply enter the **multiple** HTML attribute in the field select what you want\n```html\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"Skills\"\u003e\u003ch3\u003eYour skills\u003c/h3\u003e\u003c/label\u003e\n    \u003cdiv class=\"pk-form\"\u003e\n        \u003cselect name=\"skills[]\" id=\"skills\" multiple class=\"skills\" placeholder=\"Add your Skills\"\u003e\n            \u003coption value=\"\"\u003e\u003c/option\u003e \u003c!-- If the check is not required, submit a default value empty --\u003e     \n            \u003coption value=\"PHP\"\u003ePHP\u003c/option\u003e\n            \u003coption value=\"Ruby\"\u003eRuby\u003c/option\u003e\n            \u003coption value=\"C++\"\u003eC++\u003c/option\u003e\n            \u003coption value=\"Scrum\"\u003eScrum\u003c/option\u003e\n            \u003coption value=\"Java\"\u003eJava\u003c/option\u003e\n            \u003coption value=\"Cobol\"\u003eCobol\u003c/option\u003e\n            \u003coption value=\"Javascript\"\u003eJavascript\u003c/option\u003e\n            \u003coption value=\"AngularJS\"\u003eAngularJS\u003c/option\u003e\n            \u003coption value=\"Ionic\"\u003eIonic\u003c/option\u003e\n            \u003coption value=\"VueJS\"\u003eVueJS\u003c/option\u003e\n            \u003coption value=\"ReactJS\"\u003eReactJS\u003c/option\u003e\n            \u003coption value=\"React Native\"\u003eReact Native\u003c/option\u003e\n        \u003c/select\u003e\n    \u003c/div\u003e           \n\u003c/div\u003e\n```\n\nto set the select to pickout\n```js\npickout.to('.skills');\n```\n\n**For options already selected by default, uses the method**\n```js\npickout.updatedMultiple('.skills');\n```\nWith this method the pickout already initializes the tags of options with the selected attribute\n\n\n### Customize styles\nTo customize, simply add in your CSS rule with this pattern:\u003cbr\u003e\n\n```css\n.pk-input.-MySelector{\n    // my customization \n}\n.pk-arrow.-MySelector{\n    // my customization \n}\n```\n\nAnd the definition of pickout informs the theme\n\n```js\npickout.to({\n  el: '.city',\n  theme: 'MySelector'\n});\n```\n\n#### Themes\n**theme** - Modify the visual style, customized through CSS.\n- clean (Default)\n\nOBS: You can check or contribute more topics customizam the pickout completely.\n[Theme styles](https://github.com/ktquez/pickout/tree/master/dist/themes)\n\n```js\npickout.to({\n  el: '.state',\n  theme: 'dark' // For dark theme, available in dir style themes\n});\n```\n\n## Select with default values\n\n```html\n\u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"state\"\u003eState:\u003c/label\u003e\n    \u003cdiv class=\"pk-form\"\u003e\n        \u003cselect name=\"state\" id=\"state\" class=\"state all\" placeholder=\"Select to option\"\u003e\n        \u003c!-- Option selected by default --\u003e\n            \u003coption value=\"opt1\" selected\u003eOption 1\u003c/option\u003e\n            \u003coption value=\"opt2\"\u003eOption 2\u003c/option\u003e\n        \u003c/select\u003e  \n    \u003c/div\u003e     \n\u003c/div\u003e\n```\n\nIt uses the updated function\n\n```js\npickout.updated('.city');\n```\n\n## Current version stable\n**v2.0.1**\n\n## Browser Support\n\n| \u003cimg src=\"https://cdn0.iconfinder.com/data/icons/jfk/512/chrome-512.png\" width=\"50px\" height=\"50px\" alt=\"Chrome logo\"\u003e | \u003cimg src=\"https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Firefox.png\" width=\"50px\" height=\"50px\" alt=\"Firefox logo\"\u003e | \u003cimg src=\"http://icons.iconarchive.com/icons/cornmanthe3rd/plex/512/Internet-ie-icon.png\" width=\"50px\" height=\"50px\" alt=\"Internet Explorer logo\"\u003e | \u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Opera_browser_logo_2013_vector.svg/512px-Opera_browser_logo_2013_vector.svg.png\" width=\"50px\" height=\"50px\" alt=\"Opera logo\"\u003e | \u003cimg src=\"http://icons.iconarchive.com/icons/osullivanluke/orb-os-x/512/Safari-icon.png\" width=\"50px\" height=\"50px\" alt=\"Safari logo\"\u003e |\n|:---:|:---:|:---:|:---:|:---:|\n| Yes ✔ | Yes ✔ | 9+ ✔ | Yes ✔ |  8+ ✔ |\n\n\n## ChangeLog\n\n**v2.0.1**\n- New CSS class to wrap form\n- New syntax: add div tag before select \n- Bugfix: Search with spaces (by [@alexsmonte](https://github.com/ktquez/pickout/pull/21))\n\n**v1.3.3**\n- Fix the arrow style  \n\n**v1.3.1 / v1.3.2**\n- Add link Demo Page\n- Styles themes\n- Correction in modal\n\n**v1.3.0**\n- Multiple options\n\n**v1.2.1**\n- New Style theme \n- Correction in modal css\n\n**v1.2.0**\n- Support to option group\n- Optimizing for support to IE\n- Separation of style themes css files\n\n**v1.1.3** \n- Search field\n\n## Contributing\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.\n- Fork repository, make changes, add your name and link in the authors session readme.md\n- Send a pull request\n\nIf you want a faster communication, find me on [@ktquez](https://twitter.com/ktquez)\n\n**thank you**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktquez%2Fpickout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fktquez%2Fpickout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktquez%2Fpickout/lists"}