{"id":17458942,"url":"https://github.com/caseywebb/selectr","last_synced_at":"2025-05-07T09:42:42.901Z","repository":{"id":15418736,"uuid":"18150990","full_name":"caseyWebb/selectr","owner":"caseyWebb","description":":white_check_mark: The coolest jQuery select plugin you've never seen","archived":false,"fork":false,"pushed_at":"2017-11-30T16:37:26.000Z","size":2214,"stargazers_count":19,"open_issues_count":5,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-13T08:18:57.772Z","etag":null,"topics":["jquery","jquery-plugin","menu","select","select-box","select-multiple"],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/caseyWebb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-26T19:29:45.000Z","updated_at":"2020-06-24T12:54:32.000Z","dependencies_parsed_at":"2022-08-25T19:12:27.227Z","dependency_job_id":null,"html_url":"https://github.com/caseyWebb/selectr","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caseyWebb%2Fselectr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caseyWebb%2Fselectr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caseyWebb%2Fselectr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caseyWebb%2Fselectr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caseyWebb","download_url":"https://codeload.github.com/caseyWebb/selectr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252852571,"owners_count":21814380,"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","jquery-plugin","menu","select","select-box","select-multiple"],"created_at":"2024-10-18T04:37:55.571Z","updated_at":"2025-05-07T09:42:42.876Z","avatar_url":"https://github.com/caseyWebb.png","language":"CoffeeScript","readme":"__NOTE:__ This package is unmaintained, but I'll do my best to tend to any PRs that are submitted. Why? I've found it\nmuch easier to implement the same thing natively with whichever framework/library I'm using (Knockout, Angular, etc.).\n\n# Selectr\n\nSelectr is a jQuery plugin that aims to accomplish a seemingly simple task: make a select box that doesn't suck.\n\nIt currently supports ctrl+click, search, color-coding, and selection limiting (multi-selects). In modern browsers (Chrome, Safari, FF, IE11), selectr ensures your source element's options and itself remain in sync. If you require this behavior (_e.g._ because you're using a data-binding framework of some sort) in legacy IE, see **Legacy Browser Caveats** below.\n\nIt is built using Bootstrap components, and is written in CoffeeScript and SCSS; if your project is not using Bootstrap, you should use selectrWithPolyfill.css -- which includes all of selectr's styles along with the relevant Bootstrap styles (scoped to avoid conflicting with existing styles, of course) -- or write your own styles.\n\nSelectr was heavily inspired by [select2](https://github.com/ivaynberg/select2) and the label/assignee/milestone dropdowns in Github's issue tracker.\n\n__[Click here to view demo](http://caseywebb.github.io/selectr/demo)__\n\n## Installation\n\nSelectr can be consumed as a CommonJS module, AMD module, or global var. It is built with webpack and uses the style loader, so you do not need to worry about including a stylesheet.\n\n__NOTE:__ CommonJS and AMD modules still merely extend jQuery, so this __will not work__\n\n```javascript\nvar selectr = require('selectr')\n\nselectr('#my-selectr')\n```\n\nyou must instead use the following\n\n```javascript\nrequire('selectr')\n$ = require('jquery')\n\n$.selectr('#my-selectr')\n```\n\n#### NPM / Bower\n\n`npm install selectr`\n\n`bower install selectr`\n\n## Usage\n\nTo use selectr, simply fire it using jQuery\n\n```javascript\n$('select').selectr()\n```\n\n### Multi selects\n\nTo make selectr a multi select, simply use the `multiple` attribute on your select element as you would with regular HTML.\n\n```html\n\u003cselect name=\"foo\" multiple\u003e\n```\n\n### Color coding\n\nSelectr supports color coding of options by setting the `data-selectr-color` attribute on the option. Any valid CSS color is supported, i.e. hex, rgba(a), hsl(a).\n\nEx.\n```html\n\u003coption data-selectr-color=\"rgb(255, 255, 255)\" value=\"foo\"\u003eFoo\u003c/option\u003e\n```\n\n### Options and defaults\n\n```coffeescript\ntitle:                  'Select Options'\nnoMatchingOptionsText:  'No options found'\nplaceholder:            'Search'\nresetText:              'Clear All'\nwidth:                  '300px'\nmaxListHeight:          '250px'\ntooltipBreakpoint:      25 # min length of option name to show tooltip on\nmaxSelection:           Infinity\npanelStyle:\t\t\t\t'default'\nalwaysShowFooter:\t\tfalse\n```\n\nTo pass options to selectr, you may use an HTML5 data-* attribute, or an options object passed to the initialization function.\n\n#### Using HTML5 data attributes\n\n```html\n\u003cselect name=\"foo\" data-selectr-opts='{ \"title\": \"Foo Bar\", \"placeholder\": \"Bax Qux\", \"maxSelection\": 5, ... }' multiple\u003e\n```\n\n__NOTE__: Attribute _must_ be valid JSON; that means quoted keys as well as values. This is to avoid using [eval()](http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea).\n\n_But wait! I need quotes/apostrophes in my title!_\nEasy fix. Use the ASCII code, i.e. instead of ' use `\u0026#39;` and instead of \" use `\u0026quot;`.\n\n#### Using an options object\n\n```javascript\n$('select').selectr({ title: 'Foo Bar', placeholder: 'Baz Qux', ... });\n```\n\n#### NOTE: Order of precedence\n\nHTML5 data attributes take precedence over the options object. This allows you to pass certain parameters that should apply to most/all selectr instances, and \"fill in the blanks\" or override those options with the `data-selectr-opts` attribute. See demo file for an example.\n\n### Compatiblity\n\nRequires jQuery 1.8.3+\n\nTested in the following browsers:\n\n- Chrome\n- Firefox\n- IE 8+*\n\n### *Legacy Browser (IE8-10) caveats\n\nselectr uses MutationObservers to update the list of options, which are unsupported by older browsers. Instead of hacking together a buggy solution,\nI've opted to require that, in order to sync the options list in older browsers, a change event be manually fired on the source select element when the options change.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaseywebb%2Fselectr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaseywebb%2Fselectr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaseywebb%2Fselectr/lists"}