{"id":13595188,"url":"https://github.com/brianvoe/slim-select","last_synced_at":"2025-05-13T18:06:22.359Z","repository":{"id":39310883,"uuid":"85429736","full_name":"brianvoe/slim-select","owner":"brianvoe","description":"Slim advanced select dropdown","archived":false,"fork":false,"pushed_at":"2025-05-05T16:51:46.000Z","size":13126,"stargazers_count":1108,"open_issues_count":14,"forks_count":208,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-05T18:00:46.839Z","etag":null,"topics":["dropdown","javascript","search","select","vanilla-javascript"],"latest_commit_sha":null,"homepage":"http://slimselectjs.com","language":"TypeScript","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/brianvoe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null},"funding":{"github":"brianvoe","patreon":"brianvoe","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-03-18T20:24:10.000Z","updated_at":"2025-05-05T16:51:03.000Z","dependencies_parsed_at":"2023-12-22T17:22:27.432Z","dependency_job_id":"3709efea-97d6-43f7-b3af-d92524ff345a","html_url":"https://github.com/brianvoe/slim-select","commit_stats":{"total_commits":1016,"total_committers":55,"mean_commits":"18.472727272727273","dds":"0.43700787401574803","last_synced_commit":"a4461d62eb97afb7f8558cf290de8a8f52de3f84"},"previous_names":[],"tags_count":108,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianvoe%2Fslim-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianvoe%2Fslim-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianvoe%2Fslim-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianvoe%2Fslim-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brianvoe","download_url":"https://codeload.github.com/brianvoe/slim-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253568654,"owners_count":21928905,"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":["dropdown","javascript","search","select","vanilla-javascript"],"created_at":"2024-08-01T16:01:45.488Z","updated_at":"2025-05-13T18:06:22.336Z","avatar_url":"https://github.com/brianvoe.png","language":"TypeScript","readme":"# Slim Select 2\n\n## [slimselectjs.com](https://slimselectjs.com)\n\nAdvanced select dropdown\n\n[![NPM Downloads](https://img.shields.io/npm/dt/slim-select.svg)](https://www.npmjs.com/package/slim-select)\n![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/brianvoe/slim-select/jest.yml?logo=jest\u0026label=unit%20tests) [![slim-select](https://snyk.io/advisor/npm-package/slim-select/badge.svg)](https://snyk.io/advisor/npm-package/slim-select)\n\n## Support\n\n[![](https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/brianvoe)\n\n\u003ca href=\"https://www.buymeacoffee.com/brianvoe\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n\n## [Documentation and Examples](https://slimselectjs.com)\n\nSee [website](https://slimselectjs.com) for the full list of [settings](https://slimselectjs.com/settings), [methods](https://slimselectjs.com/methods) and [event callbacks](https://slimselectjs.com/events)\n\n![](https://raw.githubusercontent.com/brianvoe/slim-select/master/slimselect.gif)\n\n## Features\n\n- No Dependencies\n- JS: 29kb - 5kb gzip\n- CSS: 7kb - 1kb gzip\n- Single Select\n- Multi Select\n- User Addable Options\n- Html Options\n- Settable Data\n- Callback Events\n- Placeholders\n- Search\n- Disable Options\n- Light CSS\n- Light Color Scheme\n- Style and Class Inheritance\n- Clean Animations\n- Performant\n- Typescript\n\n## Frameworks\n\n- Vue\n\n## Installation\n\n```bash\nnpm install slim-select\n```\n\n### or\n\n```html\n\u003cscript src=\"https://unpkg.com/slim-select@latest/dist/slimselect.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/slim-select@latest/dist/slimselect.css\" /\u003e\n```\n\n## Simple Usage\n\n```javascript\nimport SlimSelect from 'slim-select'\n\nnew SlimSelect({\n  select: '#selectElement',\n})\n```\n\n```html\n\u003cselect id=\"selectElement\"\u003e\n  \u003coption value=\"value1\"\u003eValue 1\u003c/option\u003e\n\u003c/select\u003e\n```\n\n## Data\n\nData is an array of objects that represent both option and optgroups.\n\nSee below for list of data types\n\n```javascript\nnew SlimSelect({\n  select: '#selectElement',\n\n  // Array of Option objects\n  data: [{ text: 'Value 1', value: 'value1' }],\n\n  // or\n\n  // Array of Optgroups and/or Options\n  data: [{ label: 'Optgroup Label', options: { text: 'Value 1', value: 'value1' } }],\n})\n```\n\n## Data Types\n\n```javascript\n// \u003coptgroup\u003e\nvar optgroup = {\n  label: 'label', // Required\n  selectAll: false, // Optional - default false\n  closable: 'off', // Optional - default 'off' - 'off', 'open', 'close'\n  options: [], // Required - value is an array of options\n}\n\n// \u003coption\u003e\nvar option = {\n  text: 'text', // Required\n  value: 'value', // Optional - value will be set by text if not set\n  html: '\u003cb\u003eHtml\u003c/b\u003e', // Optional - if set, used for display purposes\n  selected: false, // Optional - default is false\n  display: true, // Optional - default is true\n  disabled: false, // Optional - default is false\n  mandatory: false, // Optional - default is false\n  placeholder: false, // Optional - default is false\n  class: '', // Optional - default is not set\n  style: '', // Optional - default is not set\n  data: {}, // Optional - If you have data attributes\n}\n```\n\n## Settings\n\nSettings are a list of fields that help customize how SlimSelect operates\n\n```javascript\nnew SlimSelect({\n  select: '#selectElement',\n\n  settings: {\n    // Below are a list of optional fields\n    // their values are the defaults\n    disabled: false,\n    alwaysOpen: false,\n    showSearch: true,\n    focusSearch: true,\n    searchPlaceholder: 'Search',\n    searchText: 'No Results',\n    searchingText: 'Searching...',\n    searchHighlight: false,\n    closeOnSelect: true,\n    contentLocation: document.body,\n    contentPosition: 'absolute',\n    openPosition: 'auto', // options: auto, up, down\n    placeholderText: 'Select Value',\n    allowDeselect: false,\n    hideSelected: false,\n    showOptionTooltips: false,\n    minSelected: 0,\n    maxSelected: 1000,\n    timeoutDelay: 200,\n    maxValuesShown: 20,\n    maxValuesMessage: '{number} selected',\n    addableText: 'Press \"Enter\" to add {value}',\n  },\n})\n```\n\n## Events\n\nEvents are function callbacks for when certain actions happen\n\n```javascript\nnew SlimSelect({\n  select: '#selectElement',\n\n  events: {\n    search: (searchValue: string, currentData: DataArray) =\u003e Promise\u003cDataArrayPartial\u003e | DataArrayPartial\n    searchFilter: (option: Option, search: string) =\u003e boolean\n    addable: (value: string) =\u003e Promise\u003cOptionOptional | string\u003e | OptionOptional | string | Error\n    beforeChange: (newVal: Option[], oldVal: Option[]) =\u003e boolean | void\n    afterChange: (newVal: Option[]) =\u003e void\n    beforeOpen: () =\u003e void\n    afterOpen: () =\u003e void\n    beforeClose: () =\u003e void\n    afterClose: () =\u003e void\n    error: (err: Error) =\u003e void\n  },\n})\n```\n","funding_links":["https://github.com/sponsors/brianvoe","https://patreon.com/brianvoe","https://www.buymeacoffee.com/brianvoe"],"categories":["TypeScript","Vue"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianvoe%2Fslim-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianvoe%2Fslim-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianvoe%2Fslim-select/lists"}