PHPackages avalynx/avalynx-select - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. avalynx/avalynx-select ActiveLibrary[Utility & Helpers](/categories/utility) avalynx/avalynx-select ====================== 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. 1.2.1(2mo ago)4126↓100%11MITJavaScriptCI passing Since May 30Pushed 2mo ago1 watchersCompare [ Source](https://github.com/avalynx/avalynx-select)[ Packagist](https://packagist.org/packages/avalynx/avalynx-select)[ Docs](https://github.com/avalynx/avalynx-select)[ RSS](/packages/avalynx-avalynx-select/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (7)Dependencies (1)Versions (10)Used By (1) AvalynxSelect ============= [](#avalynxselect) [![npm version](https://camo.githubusercontent.com/bc4032166e0c7686b90b0591116029196816505c64df57c43e397057bcc576de/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6176616c796e782d73656c656374)](https://www.npmjs.com/package/avalynx-select)[![npm downloads](https://camo.githubusercontent.com/4fac8345de2a559ef17e9c492821b8fddc29f253e999e251ae1055b3bd453b30/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f6176616c796e782d73656c656374)](https://www.npmjs.com/package/avalynx-select)[![jsDelivr](https://camo.githubusercontent.com/a87ca618d7b61cbca193d0d4b39877d2a5fc41b646b2145dd88975ac978ddf9b/68747470733a2f2f696d672e736869656c64732e696f2f6a7364656c6976722f6e706d2f686d2f6176616c796e782d73656c656374)](https://www.jsdelivr.com/package/npm/avalynx-select)[![License](https://camo.githubusercontent.com/aed294b8c5385472dda1d080522f58a8c576240cc72601c07c308f902a0c41ae/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6176616c796e782d73656c656374)](LICENSE)[![Tests](https://github.com/avalynx/avalynx-select/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-select/actions/workflows/tests.yml)[![codecov](https://camo.githubusercontent.com/abfff8b0c6987155b7457cf2099fb473d2f3f3da0a4ac7c1f24755742088addc/68747470733a2f2f636f6465636f762e696f2f67682f6176616c796e782f6176616c796e782d73656c6563742f6272616e63682f6d61696e2f67726170682f62616467652e737667)](https://codecov.io/gh/avalynx/avalynx-select)[![GitHub stars](https://camo.githubusercontent.com/d70791211c50d085c2c3b05ee1e27c8cd5f1074977cddbe2de16701ed6d6fac2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6176616c796e782f6176616c796e782d73656c6563743f7374796c653d666c6174266c6f676f3d676974687562)](https://github.com/avalynx/avalynx-select) 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. Features -------- [](#features) - **Customizable Dropdowns**: Supports various customization options like live search, case sensitivity, scrollable list, and more. - **AJAX Support**: Dynamically load list items via AJAX with support for custom mapping, debouncing, and prefetching. - **Bootstrap Integration**: Designed for seamless integration with Bootstrap >= 5.3. - **Easy to Use**: Simple API for creating and managing select dropdowns within your web applications. Example ------- [](#example) Here's a simple example of how to use AvalynxSelect in your project: - [Overview](https://avalynx-select.jbs-newmedia.de/examples/index.html) - [Simple select](https://avalynx-select.jbs-newmedia.de/examples/simple-select.html) - [Simple select with livesearch and different options](https://avalynx-select.jbs-newmedia.de/examples/simple-select-livesearch.html) - [Simple select with AJAX](https://avalynx-select.jbs-newmedia.de/examples/simple-ajax-select.html) - [Simple select with responsive design](https://avalynx-select.jbs-newmedia.de/examples/simple-select-responsive.html) - [Simple select with event listeners](https://avalynx-select.jbs-newmedia.de/examples/simple-select-disabled.html) - [Disabled select](https://avalynx-select.jbs-newmedia.de/examples/simple-select-disabled.html) - [Default value select](https://avalynx-select.jbs-newmedia.de/examples/simple-select-default-value.html) Installation ------------ [](#installation) To 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. First, include Bootstrap: ``` ``` Then, include AvalynxSelect: ``` ``` Replace `path/to/avalynx-select.js` with the actual path to the file in your project. Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-select/)) -------------------------------------------------------------------------------- [](#installation-via-jsdelivr-link) AvalynxSelect is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this: ``` ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly. Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-select)) --------------------------------------------------------------------------- [](#installation-via-npm-link) AvalynxSelect is also available as a npm package. You can add it to your project with the following command: ``` npm install avalynx-select ``` After installing, you can import AvalynxSelect into your JavaScript file like this: ``` import { AvalynxSelect } from 'avalynx-select'; ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly. Installation via Symfony AssetMapper ------------------------------------ [](#installation-via-symfony-assetmapper) ``` php bin/console importmap:require avalynx-select ``` After installing, you can import AvalynxSelect into your JavaScript file like this: ``` import { AvalynxSelect } from 'avalynx-select'; ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly. Installation via Symfony AssetComposer -------------------------------------- [](#installation-via-symfony-assetcomposer) More information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle). ``` {% do addAssetComposer('avalynx/avalynx-select/dist/js/avalynx-select.js') %} ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly. Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-select)) ----------------------------------------------------------------------------------------- [](#installation-via-composer-link) AvalynxSelect is also available as a Composer package. You can add it to your project with the following command: ``` composer require avalynx/avalynx-select ``` After installing, you can import AvalynxSelect into your HTML file like this: ``` ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxSelect displays correctly. Usage ----- [](#usage) To create a select dropdown, simply instantiate a new `AvalynxSelect` object with the desired options: ``` new AvalynxSelect("#mySelect", { liveSearch: true, caseSensitive: false, showAll: true, scrollList: true, scrollItems: 8 }, { searchPlaceholder: 'Search...', selectPlaceholder: 'Please select...' }); ``` For AJAX support: ``` new AvalynxSelect("#myAjaxSelect", { ajax: { url: 'https://api.example.com/data', method: 'GET', minimumInputLength: 3 } }); ``` Options ------- [](#options) AvalynxSelect allows the following options for customization: - `selector`: (string) The selector to use for targeting select elements within the DOM (default: `'.avalynx-select'`). - `options`: An object containing the following keys: - `className`: (string) A custom class name for the loader element (default: `''`). - `liveSearch`: (boolean) Enable live search functionality (default: `false`). - `caseSensitive`: (boolean) Enable case-sensitive search (default: `false`). - `showAll`: (boolean) Show all options when search term is empty (default: `true`). - `showActive`: (boolean) Show the active option in the dropdown (default: `true`). - `scrollList`: (boolean) Enable scrollable list (default: `true`). - `scrollItems`: (number) Number of items to display before scrolling (default: `8`). - `maxItemsToShow`: (number|null) Cap the number of rendered items (default: `null`). - `noDefaultSelection`: (boolean) Do not select any option by default (default: `false`). - `disabled`: (boolean) Initialize the select as disabled (default: `false`). - `defaultValue`: (string|null) The default value to select on initialization (default: `null`). - `ajax`: (object|null) Configuration for AJAX data source (default: `null`). - `url`: (string) URL for the AJAX request (default: `''`). - `method`: (string) HTTP method for the AJAX request (default: `'GET'`). - `headers`: (object) Custom headers for the AJAX request (default: `{}`). - `debounce`: (number) Debounce time in milliseconds (default: `250`). - `minimumInputLength`: (number) Minimum number of characters before AJAX request (default: `0`). - `length`: (number) Number of items to fetch (default: `25`). - `start`: (number) Starting index for fetching items (default: `0`). - `initialLoad`: (boolean) Load initial data via AJAX (default: `false`). - `mapRequest`: (function|null) Function to map request parameters (default: `null`). - `mapResponse`: (function|null) Function to map response data (default: `null`). - `resolveByValue`: (function|null) Function to resolve a value to a label (default: `null`). - `onChange`: (function) Callback function to be executed when an option is selected (default: `null`). - `onLoaded`: (function) Callback function to be executed when the component is loaded (default: `null`). - `language`: An object containing the following keys: - `searchPlaceholder`: (string) Placeholder text for the search input (default: `'Search...'`). - `selectPlaceholder`: (string) Placeholder text for the select dropdown (default: `'Please select...'`). - `loading`: (string) Text to display when loading data (default: `'Loading...'`). - `noResults`: (string) Text to display when no results are found (default: `'No results'`). - `error`: (string) Text to display when an error occurs (default: `'Error loading data'`). - `typeMore`: (string) Text to display for minimum input requirement (default: `'Type {remaining} more characters...'`). - `idleHint`: (string) Hint text when the search input is empty (default: `'Start typing to search'`). Contributing ------------ [](#contributing) Contributions 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: - Bug fixes - Feature enhancements - Documentation improvements Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project. License ------- [](#license) AvalynxSelect is open-sourced software licensed under the [MIT license](LICENSE). Contact ------- [](#contact) If 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. Thank you for considering AvalynxSelect for your project! ### Health Score 44 — FairBetter than 91% of packages Maintenance92 Actively maintained with recent releases Popularity18 Limited adoption so far Community10 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~106 days Recently: every ~66 days Total 7 Last Release 73d ago Major Versions 0.0.2 → 1.0.02025-06-05 ### Community Maintainers ![](https://www.gravatar.com/avatar/44b85e5ce069ccae08123600bb24204ea8fe99c8cb5cbfae108ff29c179e503d?d=identicon)[jschwind](/maintainers/jschwind) --- Top Contributors [![jschwind](https://avatars.githubusercontent.com/u/985564?v=4)](https://github.com/jschwind "jschwind (37 commits)") --- Tags avalynxbootstrapbootstrap5componentdropdownlivesearchselectcomponentbootstrapdropdownselectbootstrap5avalynxlivesearch ### Embed Badge ![Health badge](/badges/avalynx-avalynx-select/health.svg) ``` [![Health](https://phpackages.com/badges/avalynx-avalynx-select/health.svg)](https://phpackages.com/packages/avalynx-avalynx-select) ``` ### Alternatives [snapappointments/bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. 9.8k480.4k3](/packages/snapappointments-bootstrap-select)[kartik-v/dependent-dropdown A multi level dependent dropdown JQuery plugin that allows nested dependencies. 1805.0M3](/packages/kartik-v-dependent-dropdown)[istvan-ujjmeszaros/bootstrap-duallistbox A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices. 628199.4k2](/packages/istvan-ujjmeszaros-bootstrap-duallistbox)[harvesthq/chosen Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors. 385.2M11](/packages/harvesthq-chosen)[jjj/chosen Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors. 27522.1k2](/packages/jjj-chosen)[datatables.net/datatables.net-bs5 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap5\](https://getbootstrap.com/) 2185.7k16](/packages/datatablesnet-datatablesnet-bs5) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)