{"id":26316883,"url":"https://github.com/liranh85/selectise","last_synced_at":"2025-10-20T06:31:43.018Z","repository":{"id":57356539,"uuid":"133732823","full_name":"liranh85/selectise","owner":"liranh85","description":"A simple and light-weight custom HTML select element generator, built using Vanilla JS and no dependencies","archived":false,"fork":false,"pushed_at":"2018-09-02T17:13:24.000Z","size":232,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-18T11:38:12.586Z","etag":null,"topics":["choices","custom-select","dropdown","dropdown-menu","select","select-js","selectbox","selectify","selectise","vanilla","vanilla-js","vanilla-select"],"latest_commit_sha":null,"homepage":"","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/liranh85.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":"2018-05-16T23:18:55.000Z","updated_at":"2023-02-22T02:50:58.000Z","dependencies_parsed_at":"2022-09-05T04:21:01.560Z","dependency_job_id":null,"html_url":"https://github.com/liranh85/selectise","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liranh85%2Fselectise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liranh85%2Fselectise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liranh85%2Fselectise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liranh85%2Fselectise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liranh85","download_url":"https://codeload.github.com/liranh85/selectise/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243732218,"owners_count":20338839,"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":["choices","custom-select","dropdown","dropdown-menu","select","select-js","selectbox","selectify","selectise","vanilla","vanilla-js","vanilla-select"],"created_at":"2025-03-15T13:17:15.298Z","updated_at":"2025-10-20T06:31:42.964Z","avatar_url":"https://github.com/liranh85.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Selectise\n\nTransforms a native `select` element to a markup structure that allows styling using CSS (as opposed to the native `select` and `option` elements)\n\n## Live example\n\nhttp://www.liran.co.uk/selectise\n\n## Features\n\n  - **Ability to style the `select` element freely using CSS**\n  - **CSS theme out of the box** (using _selectise-theme.scss)\n  - **Keyboard shortcuts:**\n    - _Enter_ to open dropdown, when the trigger is focused\n    - _Arrow up/down_ to navigate the dropdown's option list, when it is opened\n    - _Esc_ to close the dropdown, when it is opened\n  - **Copies all attributes from native `select` and `option` elements** to corresponding elements in the Selectise markup\n    - `select` element:\n      - Copies all attributes\n      - If `tabindex` exists, it will also be copied to the trigger element and to each option element\n    - `option` elements:\n      - Copies all attributes\n      - If `value` attribute exists, it will be copied as `data-value`\n      - If `selected` attribute exists, this option will be selected, and the attribute will be removed from the custom option element\n  - **Supports screen readers** thanks to these factors:\n    - Copying the tabindex from the `select` element\n    - Supporting keyboard shortcuts\n    - Focusing the current option when using the keyboard to navigate the options list\n    - Focusing the trigger once a selection has been made (this both confirms the selection to the accessiblilty user, and allows for an easy re-opening of the options dropdown)\n\n## Installation\n\n```\nnpm install selectise\n```\n\n## Usage\n\n### JS\n```js\nimport Selectise from 'selectise'\n\nconst selectise = new Selectise(nativeSelect, options)\n```\n\n### SCSS\n\nRequires `_selectise-base.scss` to work properly. You should also use `_selectise-theme.scss` if you're not setting your own styles.\n```scss\n@import '~selectise/src/selectise-base';\n@import '~selectise/src/selectise-theme';\n```\n\n## Usage - ES5 and CSS\n\n```html\n\u003chead\u003e\n  \u003c!-- ... --\u003e\n  \u003clink rel=\"stylesheet\" href=\"selectise/style.css\"\u003e\n  \u003cscript src=\"selectise/index.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- ... --\u003e\n  \u003cscript\u003e\n    var selectise = new Selectise.default(nativeSelect, options);\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n## Parameters\n\nSelectise takes two arguments:\n\n### nativeSelect\nThis can be either:\n- **A refrence to the native select element**\n- **A string representing a selector for the native select element** (e.g. `'#main .my-select-element'`), in which case Selectise will select and use the first matching element\n\n### Options\nIf you'd like to configure Selectise, you can pass an options object as the second parameter.\n```js\nconst options = {\n  onSelect, // [Callback function] Will be called when an option has been selected. When called, an Object with the following properties will be passed: `selectionContent`, `selectionValue`, `selectionIndex`.\n  shouldCloseOnClickBody, // [Boolean, default: false] Whether or not to close the dropdown on click body.\n  shouldSetOptionContentToTitle // [Boolean, default: false] Whether or not to set the content of each option to its title. This is useful when some of the options are expected to exceed the width of the select dropdown.\n  shouldReplaceSelectBeAsync // [Boolean, default: false] Whether or to use setTimeout for replacing the native select with the custom select (Selectise). This can help in fixing the issue of Selectise getting focused on insertion to the DOM, which happens when using tabindex.\n}\n```\n\n## Public methods\n\n### `isOpen()`\nIs dropdown menu open - returns `true`/`false`\n\n### `close()`\nCloses the dropdown menu\n\n### `open()`\nOpens the dropdown menu\n\n### `toggle()`\nToggles the dropdown menu\n\n### `getContent()`\nReturns the content of the currently selected option\n\n### `getValue()`\nReturns the value of the currently selected option\n\n### `getIndex()`\nReturns the index of the currently selected option\n\n### `setIndex(index)`\nSelects an option based on its index\n\n### `destory()`\nRemoves all event listeners of the Selectise instance\n\n## Generated markup\nFor the following native select element\n```html\n\u003cselect id=\"example-select\" tabindex=\"1\"\u003e\n  \u003coption value=\"value1\" data-some-attr=\"some-attr-value\" class=\"some-class\"\u003eOption 1\u003c/option\u003e\n  \u003coption value=\"value2\" title=\"Some title\"\u003eOption 2\u003c/option\u003e\n  \u003coption value=\"value3\"\u003eOption 3\u003c/option\u003e\n\u003c/select\u003e\n```\n\nThe following markup will be generated:\n```html\n\u003cdiv class=\"selectise\" id=\"example-select\" tabindex=\"1\"\u003e\n  \u003cdiv class=\"selectise-trigger\" tabindex=\"1\"\u003eOption 1\u003c/div\u003e\n  \u003cdiv class=\"selectise-options\"\u003e\n    \u003cdiv data-value=\"value1\" data-some-attr=\"some-attr-value\" class=\"some-class selectise-option\" tabindex=\"1\"\u003eOption 1\u003c/div\u003e\n    \u003cdiv data-value=\"value2\" title=\"Some title\" class=\"selectise-option\" tabindex=\"1\"\u003eOption 2\u003c/div\u003e\n    \u003cdiv data-value=\"value3\" class=\"selectise-option\" tabindex=\"1\"\u003eOption 3\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## CSS classes used\n\n### `selectise`\nAdded to the top level custom select element, which contains the trigger and options elements\n\n### `selectise-trigger`\nAdded to the trigger element, which holds the selected value and toggles the dropdown\n\n### `selectise-options`\nAdded to the element containing the options\n\n### `selectise-option`\nAdded to each custom option element\n\n### `selectise-open`\nWill be added to the Selectise element when the dropdown is open (and removed when it is closed)\n\n\n## Dependencies\n\nNone\n\n## Contributing\n\nFeel free to submit issues and pull requests\n\n## Development\n\n* Run the following, which will serve the Selctise example on localhost:8081 and watch for changes.\n```\nnpm start\n```\n\n* Navigate to http://localhost:8081/example/ to view the output\n* Test the library in `src/example`:\n  * index.html\n  * index.js\n  * index.scss\n* Edit the library itself in `src`:\n  * index.js\n  * _selectise-base.scss\n  * _selectise-theme.scss\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliranh85%2Fselectise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliranh85%2Fselectise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliranh85%2Fselectise/lists"}