{"id":15381119,"url":"https://github.com/michael-brade/derby-select2","last_synced_at":"2025-03-27T22:34:04.494Z","repository":{"id":94139329,"uuid":"68434695","full_name":"michael-brade/derby-select2","owner":"michael-brade","description":"Native DerbyJS replacement for jQuery Select2","archived":false,"fork":false,"pushed_at":"2020-04-29T22:46:19.000Z","size":1186,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T19:07:59.853Z","etag":null,"topics":["derbyjs","javascript","jquery-select2","select2"],"latest_commit_sha":null,"homepage":"https://michael-brade.github.io/derby-select2/","language":"JavaScript","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/michael-brade.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-17T05:53:23.000Z","updated_at":"2019-12-08T07:25:55.000Z","dependencies_parsed_at":"2023-03-13T17:05:07.573Z","dependency_job_id":null,"html_url":"https://github.com/michael-brade/derby-select2","commit_stats":{"total_commits":158,"total_committers":1,"mean_commits":158.0,"dds":0.0,"last_synced_commit":"71d7c1632526750c1d9c19e5c39be4cb20cb3452"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael-brade%2Fderby-select2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael-brade%2Fderby-select2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael-brade%2Fderby-select2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael-brade%2Fderby-select2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michael-brade","download_url":"https://codeload.github.com/michael-brade/derby-select2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245935746,"owners_count":20696693,"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":["derbyjs","javascript","jquery-select2","select2"],"created_at":"2024-10-01T14:25:47.447Z","updated_at":"2025-03-27T22:34:04.471Z","avatar_url":"https://github.com/michael-brade.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Select2 component for DerbyJS\n\nThis is a [DerbyJS](http://github.com/derbyjs/derby) component for jQuery Select2 4.0.\n\nIt features some improved usability, and it adds support for\n\n* re-ordering multi-selections with drag\u0026drop using [Sortable](https://sortablejs.github.io/Sortable/)\n* allowing to select an item repeatedly in multi-selection mode\n* supports ES6 and is written in ES6\n\nThe html-structure is exactly identical to the jQuery Select2 component, so styles can be simply reused. You will still\nmost likely recognize the resemblance to the original jQuery Select2 code, but using Derby, much less code is required.\n\n## Installation\n\n```sh\nnpm install derby-select2\n```\n\n## Usage\n\n### In your app\n\n```js\n// Use component published as module\napp.component(require('derby-select2'));\n```\n\n### In your template\n\n```html\n\u003cselect2 id=\"select2-id12345\" class=\"form-control\" options=\"{{select2options}}\" data=\"{{items}}\" value=\"{{data}}\" /\u003e\n```\n\n\n## Design\n\n### Components/Views\n\nThere are five main components that make up Select2:\n\n* \"core\" is the main view, parent of all others\n* \"results\" is the contents of the dropdown and shows the selectable items.\n* \"selection/multiple\" and \"selection/single\" are the selection views: they show what has already been selected\n* \"search\" is used to filter the results (by dropdown and multiple)\n\nThe views can be configured using the following options:\n\n* `selectionAdapter`: string; the name of a DerbyJS view (component) that is to be used as selection view\n* `resultsAdapter`: string; the name of a DerbyJS view (component) that should display the selectable items\n\nBoth, the `selectionAdapter` and the `resultsAdapter`, will get an `item` attribute (not normalized) passed.\nIf you need to pass and get more data, make the view a component and get the data from the options you passed\nto Select2 by calling `this.parent.model.get('options')`.\n\nThe model is set up using a data adapter; it is configured using:\n\n* `dataAdapter`: class; a simple EventEmitter class, needs to set up the model and normalization. And, a data adapter\n  filters according to query arguments (paging) and a model path (filtering).\n\n\n### Model\n\ninput paths:\n\n* \"data\": an array with all possible selectable items\n\noutput paths:\n\n* \"value\": where to store the array with the selected item(s)\n\nconfiguration path:\n\n* \"options\": where all the Select2 options are stored\n\nmodel paths for internal Select2 use:\n\n* focus (bool): true if Select2 has focus\n* open (bool): true if dropdown open\n* results (array): filtered and sorted selectable items to show in dropdown\n* selections (array): selected items\n* highlighted: the currently highlighted item (replaces results:focus event)\n\n\n### Events/Signals\n\nThe events that can be emitted are:\n\n* open, close, query, queryEnd, select, move, unselect, focus, blur, disable, enable\n* opening, closing, selecting, unselecting\n* results:select, results:toggle, results:previous, results:next, results:first, results:last\n\nExplanation:\n\n* opening the dropdown emits \"query\"\n\n* \"query\" starts getting the data from the dataAdapter - if no query is necessary, \"queryEnd\" is emitted right away\n* \"query\" opens the dropdown\n* query adds \"loading\" message\n* queryEnd removes \"loading\" message\n\n\n\n### Data flow\n\nThe (default) model data adapter sets up the following references:\n\n* data -\u003e results\n  Takes the items from model path \"data\" (array) and normalizes, filters, and sorts it to \"results\" (array).\n\n* data -\u003e value\n  On select/move/unselect events it copies or moves the item of the event to value, or deletes the item from value.\n\n* value -\u003e selections\n  Takes input from model path \"value\" and normalizes it to \"selections\".\n\nNormalization is internal to Select2, and it means how to get those attributes: `id`, `title`, `text`, `children`, `disabled`.\n\n\"results\" contains normalized items and is thus an array of objects with this structure:\n\n```js\ndata: {\n    item: \u003coriginal item\u003e,\n    id: item.id,\n    title: item.title,\n    text: item.text,\n    children: item.children,\n    disabled: item.disabled,\n    selected: true/false\n}\n```\n\n## Differences to jQuery Select2\n\n* no RelayEvents\n\n  There is no original $element anymore that needs the events relayed to.\n\n* no SelectAdapter, no ArrayAdapter\n\n  I don't think a SelectAdapter makes sense in case of DerbyJS, neither does the ArrayAdapter.\n  Why would you create options from some data and then convert the options back to data?\n  And an array can be passed using the model.\n\n\n\n\n## License\n\nMIT\n\nCopyright (c) 2015-2016, 2019 Michael Brade\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichael-brade%2Fderby-select2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichael-brade%2Fderby-select2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichael-brade%2Fderby-select2/lists"}