{"id":18465130,"url":"https://github.com/avalynx/avalynx-select","last_synced_at":"2025-09-04T00:07:03.824Z","repository":{"id":241869860,"uuid":"761936323","full_name":"avalynx/avalynx-select","owner":"avalynx","description":"AvalynxSelect is a lightweight, customizable select dropdown component for web applications. It is designed to be used with Bootstrap version 5.3 or higher and does not require any framework dependencies.","archived":false,"fork":false,"pushed_at":"2025-03-07T23:29:30.000Z","size":106,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T09:24:30.590Z","etag":null,"topics":["avalynx","bootstrap","bootstrap5","component","dropdown","livesearch","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/avalynx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2024-02-22T19:08:11.000Z","updated_at":"2025-03-07T23:29:35.000Z","dependencies_parsed_at":"2024-11-06T09:12:15.615Z","dependency_job_id":"a6538e55-ce8f-4ad2-9614-77dec63af872","html_url":"https://github.com/avalynx/avalynx-select","commit_stats":null,"previous_names":["avalynx/avalynx-select"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avalynx","download_url":"https://codeload.github.com/avalynx/avalynx-select/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247804514,"owners_count":20999001,"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":["avalynx","bootstrap","bootstrap5","component","dropdown","livesearch","select"],"created_at":"2024-11-06T09:12:04.722Z","updated_at":"2025-09-04T00:07:03.672Z","avatar_url":"https://github.com/avalynx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AvalynxSelect\n\nAvalynxSelect is a lightweight, customizable select dropdown component for web applications. It is designed to be used with Bootstrap version 5.3 or higher and does not require any framework dependencies.\n\n## Features\n\n- **Customizable Dropdowns**: Supports various customization options like live search, case sensitivity, scrollable list, and more.\n- **Bootstrap Integration**: Designed for seamless integration with Bootstrap \u003e= 5.3.\n- **Easy to Use**: Simple API for creating and managing select dropdowns within your web applications.\n\n## Example\n\nHere's a simple example of how to use AvalynxSelect in your project:\n\n* [Overview](https://avalynx-select.jbs-newmedia.de/examples/index.html)\n* [Simple select](https://avalynx-select.jbs-newmedia.de/examples/simple-select.html)\n* [Simple select with livesearch and different options](https://avalynx-select.jbs-newmedia.de/examples/simple-select-livesearch.html)\n* [Simple select with responsive design](https://avalynx-select.jbs-newmedia.de/examples/simple-select-responsive.html)\n* [Simple select with event listeners](https://avalynx-select.jbs-newmedia.de/examples/simple-select-event-listeners.html)\n\n## Installation\n\nTo use AvalynxSelect in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxSelect to work correctly.\n\nFirst, include Bootstrap:\n\n```html\n\u003c!-- Bootstrap --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n```\n\nThen, include AvalynxSelect:\n\n```html\n\u003cscript src=\"path/to/avalynx-select.js\"\u003e\u003c/script\u003e\n```\n\nReplace `path/to/avalynx-select.js` with the actual path to the file in your project.\n\n## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-select/))\n\nAvalynxSelect is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/avalynx-select@1.0.0/dist/js/avalynx-select.js\"\u003e\u003c/script\u003e\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly.\n\n## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-select))\n\nAvalynxSelect is also available as a npm package. You can add it to your project with the following command:\n\n```bash\nnpm install avalynx-select\n```\n\nAfter installing, you can import AvalynxSelect into your JavaScript file like this:\n\n```javascript\nimport { AvalynxSelect } from 'avalynx-select';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly.\n\n## Installation via Symfony AssetMapper\n\n```bash\nphp bin/console importmap:require avalynx-select\n```\n\nAfter installing, you can import AvalynxSelect into your JavaScript file like this:\n\n```javascript\nimport { AvalynxSelect } from 'avalynx-select';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly.\n\n## Installation via Symfony AssetComposer\n\nMore information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle).\n\n```twig\n{% do addAssetComposer('avalynx/avalynx-select/dist/js/avalynx-select.js') %}\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly.\n\n## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-select))\n\nAvalynxSelect is also available as a Composer package. You can add it to your project with the following command:\n\n```bash\ncomposer require avalynx/avalynx-select\n```\n\nAfter installing, you can import AvalynxSelect into your HTML file like this:\n\n```html\n\u003cscript src=\"vendor/avalynx/avalynx-select/dist/js/avalynx-select.js\"\u003e\u003c/script\u003e\n``` \n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly.\n\n## Usage\n\nTo create a select dropdown, simply instantiate a new `AvalynxSelect` object with the desired options:\n\n```javascript\nnew AvalynxSelect(\"#mySelect\", {\n  liveSearch: true,\n  caseSensitive: false,\n  showAll: true,\n  scrollList: true,\n  scrollItems: 8\n}, {\n  searchPlaceholder: 'Search...',\n  selectPlaceholder: 'Please select...'\n});\n```\n\n## Options\n\nAvalynxSelect allows the following options for customization:\n\n- `selector`: (string) The selector to use for targeting select elements within the DOM (default: `'.avalynx-select'`).\n- `options`: An object containing the following keys:\n    - `className`: (string) A custom class name for the loader element (default: `''`).\n    - `liveSearch`: (boolean) Enable live search functionality (default: `false`).\n    - `caseSensitive`: (boolean) Enable case-sensitive search (default: `false`).\n    - `showAll`: (boolean) Show all options when search term is empty (default: `true`).\n    - `scrollList`: (boolean) Enable scrollable list (default: `true`).\n    - `scrollItems`: (number) Number of items to display before scrolling (default: `8`).\n    - `noDefaultSelection`: (boolean) Do not select any option by default (default: `false`).\n    - `onChange`: (function) Callback function to be executed when an option is selected (default: `null`).\n    - `onLoaded`: (function) Callback function to be executed when the component is loaded (default: `null`).\n- `language`: An object containing the following keys:\n    - `searchPlaceholder`: (string) Placeholder text for the search input (default: `'Search...'`).\n    - `selectPlaceholder`: (string) Placeholder text for the select dropdown (default: `'Please select...'`).\n\n## Planned Features\n- Add support for multiple selection\n- Add support for grouped options\n- Add support for styling options\n- Add ajax loading of list items\n\n## Contributing\n\nContributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:\n\n- Bug fixes\n- Feature enhancements\n- Documentation improvements\n\nBefore submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.\n\n## License\n\nAvalynxSelect is open-sourced software licensed under the [MIT license](LICENSE).\n\n## Contact\n\nIf you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-select/issues) or submit a pull request.\n\nThank you for considering AvalynxSelect for your project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favalynx%2Favalynx-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-select/lists"}