{"id":16232184,"url":"https://github.com/ryanfitzgerald/tagselector","last_synced_at":"2025-03-19T14:31:03.303Z","repository":{"id":65514063,"uuid":"58934908","full_name":"RyanFitzgerald/tagselector","owner":"RyanFitzgerald","description":"Dependency-free JS library that turns select fields in customizable tag clouds","archived":false,"fork":false,"pushed_at":"2017-10-14T19:14:08.000Z","size":192,"stargazers_count":18,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T19:19:49.620Z","etag":null,"topics":["demo","dropdown","javascript","list","multiple","select","tag-cloud","tags"],"latest_commit_sha":null,"homepage":"http://ryanfitzgerald.github.io/tagselector/","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/RyanFitzgerald.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-16T13:34:42.000Z","updated_at":"2023-07-28T07:10:09.000Z","dependencies_parsed_at":"2023-01-26T20:55:15.268Z","dependency_job_id":null,"html_url":"https://github.com/RyanFitzgerald/tagselector","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Ftagselector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Ftagselector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Ftagselector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Ftagselector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanFitzgerald","download_url":"https://codeload.github.com/RyanFitzgerald/tagselector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243997107,"owners_count":20380980,"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":["demo","dropdown","javascript","list","multiple","select","tag-cloud","tags"],"created_at":"2024-10-10T13:08:20.885Z","updated_at":"2025-03-19T14:31:03.007Z","avatar_url":"https://github.com/RyanFitzgerald.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tag Selector\r\n\r\nLightweight (~2kb gzipped), ES6 Class-based library for turning select fields into customizable and user friendly tag clouds.\r\n\r\nFeatures include:\r\n\r\n* ES6 Class-based (Transpiled to ES5 / CommonJS)\r\n* ~2kb in size gzipped\r\n* 100% Dependency free\r\n* Comes completely unstyled or with an optional base theme (see screenshot)\r\n* Easy to style with well-named CSS classes\r\n* Mobile Friendly\r\n\r\n![Tag selector demo](https://i.imgur.com/e9zYGgp.jpg)\r\n\r\n### [See demo here](http://ryanfitzgerald.github.io/tagselector/)\r\n\r\nThis library works by simply hiding and changing the hidden select field behind the scenes as user selects tags. The way you handle forms with selects remains the same, however users get a much more user friendly experience.\r\n\r\n## Installation\r\n\r\nVia NPM:\r\n\r\n```\r\nnpm install --save tagselector\r\n```\r\n\r\nOr simply download `dist/tagselector.js` manually if not using NPM.\r\n\r\nThen simply include it however you like:\r\n\r\n```javascript\r\nconst TagSelector = require('tagselector');\r\n```\r\n\r\nor\r\n\r\n```html\r\n\u003cscript src=\"path/to/tagselector.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n## Usage\r\n\r\nTo use, simply create a select field with a unique ID, as well as some options with text and values:\r\n\r\n```html\r\n\u003cselect id=\"someSelect\"\u003e\r\n  \u003coption value=\"orange\"\u003eOrange\u003c/option\u003e\r\n  \u003coption value=\"apple\"\u003eApple\u003c/option\u003e\r\n\u003c/select\u003e\r\n```\r\n\r\n*Note: Add `multiple` to the select in order to get multiselect functionality with the tag cloud.*\r\n\r\nNext, create a new instance of tagselector and pass in the Javascript Object reference:\r\n\r\n```javascript\r\nvar selectField = document.getElementById('someSelect');\r\nvar tagSelector = new TagSelector(selectField);\r\n```\r\n\r\nTo **reload** a current instance, simply do the following:\r\n\r\n```javascript\r\nvar selectField = document.getElementById('someSelect');\r\nvar tagSelector = new TagSelector(selectField);\r\ntagSelector.reload();\r\n```\r\n\r\nYou can also **destroy** the instance as follows:\r\n\r\n```javascript\r\nvar selectField = document.getElementById('someSelect');\r\nvar tagSelector = new TagSelector(selectField);\r\ntagSelector.destroy();\r\n```\r\n### Customization\r\n\r\nTag selector comes with a number of customizations that can be passed as an optional parameter:\r\n\r\n```javascript\r\nvar selectField = document.getElementById('someSelect');\r\nvar tagSelector = new TagSelector(selectField, {\r\n  max: 2,\r\n  onInit: function() {\r\n    console.log('inited!')\r\n  },\r\n  onDestroy: function() {\r\n    console.log('destroyed!')\r\n  },\r\n  onSelect: function(value, text) {\r\n    console.log(`Selected item with value: '${value}' and text: '${text}'`)\r\n  },\r\n  onDeselect: function(value, text) {\r\n    console.log(`Deselected item with value: '${value}' and text: '${text}'`)\r\n  }\r\n});\r\n```\r\n\r\n| Setting | Description | Default |\r\n| ------- | ----------- | ------- |\r\n| max | Sets a maximum number of selects at a given time (only works with multiselect) | false |\r\n| onInit | Callback function after new instance of tag selector is created | false |\r\n| onDestroy | Callback function after instance of tag selector is destroyed | false |\r\n| onSelect | Callback function after a new tag is selected. Params received are option value and text | false |\r\n| onDeselect | Callback function after a tag is deselected. Params received are option value and text | false |\r\n\r\n## Styles\r\n\r\nBy default, the wrapper and tags don't come with any styling, leaving the look and feel completely up to you. The classes available to style are as follows:\r\n\r\n| Class Name | Description |\r\n| ---------- | ----------- |\r\n| .tagselector-wrap | The wrapper div surrounding all tags |\r\n| .tagselector-tag | Each individiual tag span |\r\n| .active | Class applied to any actively selected tag |\r\n\r\nIf you would also like some basic styling out of the box (like in the screenshot above), include the CSS:  ``dist/tagselector.css``.\r\n\r\n## License\r\n\r\nMIT License. See LICENSE.MD\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanfitzgerald%2Ftagselector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanfitzgerald%2Ftagselector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanfitzgerald%2Ftagselector/lists"}