PHPackages avalynx/avalynx-autocomplete - 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-autocomplete ActiveLibrary[Utility & Helpers](/categories/utility) avalynx/avalynx-autocomplete ============================ AvalynxAutocomplete is a lightweight, customizable autocomplete 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.0.4(2mo ago)16MITJavaScriptCI passing Since Feb 27Pushed 2mo agoCompare [ Source](https://github.com/avalynx/avalynx-autocomplete)[ Packagist](https://packagist.org/packages/avalynx/avalynx-autocomplete)[ Docs](https://github.com/avalynx/avalynx-autocomplete)[ RSS](/packages/avalynx-avalynx-autocomplete/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (5)Dependencies (1)Versions (6)Used By (0) AvalynxAutocomplete =================== [](#avalynxautocomplete) [![npm version](https://camo.githubusercontent.com/0e316e8b23a4b2f6a4b3061fa72707c04ea85ced616b251fd1048a83db60c1cb/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6176616c796e782d6175746f636f6d706c657465)](https://www.npmjs.com/package/avalynx-autocomplete)[![npm downloads](https://camo.githubusercontent.com/ce4af956fc01de923de7bb0dabbcf63614310dffb3d75fa4dffb94fa7c0c693c/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f6176616c796e782d6175746f636f6d706c657465)](https://www.npmjs.com/package/avalynx-autocomplete)[![jsDelivr](https://camo.githubusercontent.com/261075d2b8061de5820807b689c1ac41db0c8285a3f0eedfd362934e0b659d07/68747470733a2f2f696d672e736869656c64732e696f2f6a7364656c6976722f6e706d2f686d2f6176616c796e782d6175746f636f6d706c657465)](https://www.jsdelivr.com/package/npm/avalynx-autocomplete)[![License](https://camo.githubusercontent.com/5de1fcf457db9d0a493923364f9f0935af09d4b7b30a3999a880816f79774233/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6176616c796e782d6175746f636f6d706c657465)](LICENSE)[![Tests](https://github.com/avalynx/avalynx-autocomplete/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-autocomplete/actions/workflows/tests.yml)[![codecov](https://camo.githubusercontent.com/72f97d75af4630b7aaa1da1d08a60b9933c8edc91f9a1e2539f839489b9b86c0/68747470733a2f2f636f6465636f762e696f2f67682f6176616c796e782f6176616c796e782d6175746f636f6d706c6574652f6272616e63682f6d61696e2f67726170682f62616467652e737667)](https://codecov.io/gh/avalynx/avalynx-autocomplete)[![GitHub stars](https://camo.githubusercontent.com/684d867537732f0fcd197b908c0a4dcc4eb72923a816c14a5a8e7ead3aa72bab/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6176616c796e782f6176616c796e782d6175746f636f6d706c6574653f7374796c653d666c6174266c6f676f3d676974687562)](https://github.com/avalynx/avalynx-autocomplete) AvalynxAutocomplete is a lightweight, customizable autocomplete 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 Autocomplete Inputs**: Supports various customization options like single- and multi-select, case-sensitivity, minimum length for search, and debouncing. - **Flexible Data Sources**: Support for static data or dynamic loading via a custom `fetchData` function. - **Multi-Select Support**: Management of multiple selections with tags, which can be displayed either above or inline in the input field. - **Bootstrap Integration**: Designed for seamless integration with Bootstrap >= 5.3. - **Easy to Use**: Simple API for creating and managing autocomplete fields in your web applications. Examples -------- [](#examples) Here is an overview of various use cases for AvalynxAutocomplete: - [Overview](https://avalynx-autocomplete.jbs-newmedia.de/examples/index.html) - [All-in-one Demo](https://avalynx-autocomplete.jbs-newmedia.de/examples/autocomplete.html) - [Single-select (Button Style)](https://avalynx-autocomplete.jbs-newmedia.de/examples/single-select-button.html) - [Single-select (Icon Style)](https://avalynx-autocomplete.jbs-newmedia.de/examples/single-select-icon.html) - [Single-select (Pre-selected)](https://avalynx-autocomplete.jbs-newmedia.de/examples/single-select-preselected.html) - [Single-select (Pre-selected, Ajax)](https://avalynx-autocomplete.jbs-newmedia.de/examples/single-select-preselected-ajax.html) - [Multi-select (Tags above, Button Style)](https://avalynx-autocomplete.jbs-newmedia.de/examples/multi-select-above-button.html) - [Multi-select (Tags above, Button Style, Ajax)](https://avalynx-autocomplete.jbs-newmedia.de/examples/multi-select-above-button-ajax.html) - [Multi-select (Tags above, Icon Style)](https://avalynx-autocomplete.jbs-newmedia.de/examples/multi-select-above-icon.html) - [Multi-select (Tags above, Icon Style, Ajax)](https://avalynx-autocomplete.jbs-newmedia.de/examples/multi-select-above-icon-ajax.html) - [Multi-select (Tags inline, Button Style)](https://avalynx-autocomplete.jbs-newmedia.de/examples/multi-select-inline-button.html) - [Multi-select (Tags inline, Button Style, Ajax)](https://avalynx-autocomplete.jbs-newmedia.de/examples/multi-select-inline-button-ajax.html) - [Multi-select (Tags inline, Icon Style)](https://avalynx-autocomplete.jbs-newmedia.de/examples/multi-select-inline-icon.html) - [Multi-select (Tags inline, Icon Style, Ajax)](https://avalynx-autocomplete.jbs-newmedia.de/examples/multi-select-inline-icon-ajax.html) Installation ------------ [](#installation) To use AvalynxAutocomplete in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project. First, include Bootstrap: ``` ``` Then, include AvalynxAutocomplete (CSS and JS): ``` ``` Replace `path/to/` with the actual path to the file in your project. Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-autocomplete/)) -------------------------------------------------------------------------------------- [](#installation-via-jsdelivr-link) AvalynxAutocomplete 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. Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-autocomplete)) --------------------------------------------------------------------------------- [](#installation-via-npm-link) AvalynxAutocomplete is also available as an npm package. You can add it to your project with the following command: ``` npm install avalynx-autocomplete ``` After installation, you can import AvalynxAutocomplete into your JavaScript file like this: ``` import { AvalynxAutocomplete } from 'avalynx-autocomplete'; ``` Installation via Symfony AssetMapper ------------------------------------ [](#installation-via-symfony-assetmapper) ``` php bin/console importmap:require avalynx-autocomplete ``` After installation, you can import AvalynxAutocomplete into your JavaScript file like this: ``` import { AvalynxAutocomplete } from 'avalynx-autocomplete'; ``` 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-autocomplete/dist/css/avalynx-autocomplete.css') %} {% do addAssetComposer('avalynx/avalynx-autocomplete/dist/js/avalynx-autocomplete.js') %} ``` Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-autocomplete)) ----------------------------------------------------------------------------------------------- [](#installation-via-composer-link) AvalynxAutocomplete is also available as a Composer package. You can add it to your project with the following command: ``` composer require avalynx/avalynx-autocomplete ``` After installation, you can include AvalynxAutocomplete in your HTML file like this: ``` ``` Usage ----- [](#usage) To create an autocomplete field, simply instantiate a new `AvalynxAutocomplete` object with the desired options: ``` new AvalynxAutocomplete("#myAutocomplete", { data: [ { key: '1', value: 'Option 1' }, { key: '2', value: 'Option 2' }, { key: '3', value: 'Option 3' } ], maxItems: 10, minLength: 2 }, { placeholder: 'Search...', noResults: 'No results found' }); ``` For use with an API (`fetchData`): ``` new AvalynxAutocomplete("#myAjaxAutocomplete", { fetchData: async (query) => { const response = await fetch(`https://api.example.com/search?q=${query}`); const data = await response.json(); return data.map(item => ({ key: item.id, value: item.name })); }, minLength: 3 }); ``` Options ------- [](#options) AvalynxAutocomplete allows the following options for customization: - `selector`: (string) The selector for the input elements (default: `'.avalynx-autocomplete'`). - `options`: An object containing the following keys: - `className`: (string) Additional CSS classes for the dropdown (default: `''`). - `maxItems`: (number) Maximum number of results displayed in the dropdown (default: `5`). - `maxSelections`: (number) Maximum number of selectable items. If > 1, multi-select mode is activated (default: `1`). - `minLength`: (number) Minimum number of characters to start the search (default: `1`). - `debounce`: (number) Delay in milliseconds after the last keystroke (default: `300`). - `caseSensitive`: (boolean) Case-sensitive search (default: `false`). - `disabled`: (boolean) Initialize in a disabled state (default: `false`). - `defaultValue`: (string|null) Default value (label) upon initialization (default: `null`). - `defaultKey`: (string|null) Default key upon initialization (default: `null`). - `defaultSelections`: (array|null) Array of objects `{key, value}` for multi-select default values (default: `null`). - `tagsPosition`: (string) Position of tags in multi-select (`'above'` or `'inline'`) (default: `'above'`). - `clearStyle`: (string) Style of the clear button (`'button'` or `'icon'`) (default: `'button'`). - `data`: (array|null) Static array of data objects `{key, value}` (default: `null`). - `fetchData`: (function|null) Asynchronous function for fetching data (default: `null`). - `onChange`: (function) Callback on selection change (default: `null`). - `onClear`: (function) Callback when the field is cleared (default: `null`). - `onLoaded`: (function) Callback after component initialization (default: `null`). - `language`: An object containing the following keys: - `placeholder`: (string) Placeholder text for the input field (default: `'Search...'`). - `noResults`: (string) Text when no results are found (default: `'No results found'`). - `clearTitle`: (string) Title attribute for the clear button (default: `'Clear selection'`). - `removeTitle`: (string) Title attribute for removing a tag (default: `'Remove'`). 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) AvalynxAutocomplete is open-source software licensed under the [MIT license](LICENSE). Contact ------- [](#contact) If you have any questions, feature requests, or issues, please open an issue in our [GitHub repository](https://github.com/avalynx/avalynx-autocomplete/issues) or submit a pull request. Thank you for considering AvalynxAutocomplete for your project! ### Health Score 35 — LowBetter than 80% of packages Maintenance86 Actively maintained with recent releases Popularity6 Limited adoption so far Community6 Small or concentrated contributor base Maturity37 Early-stage or recently created project 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 ~0 days Total 5 Last Release 69d ago ### 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 (8 commits)") --- Tags autocompleteavalynxbootstrapbootstrap5componentdropdownlivesearchautocompletecomponentbootstrapdropdownbootstrap5avalynxlivesearch ### Embed Badge ![Health badge](/badges/avalynx-avalynx-autocomplete/health.svg) ``` [![Health](https://phpackages.com/badges/avalynx-avalynx-autocomplete/health.svg)](https://phpackages.com/packages/avalynx-avalynx-autocomplete) ``` ### 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)[vsn4ik/bootstrap-submenu Bootstrap Sub-Menus 46310.3k](/packages/vsn4ik-bootstrap-submenu)[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)[lifo/typeahead-bundle A Symfony bundle that provides an autocomplete Typeahead form type compatible with Bootstrap v2|v3 22118.8k](/packages/lifo-typeahead-bundle)[bizley/ajaxdropdown Bootstrap dropdown list with AJAX data. 1524.8k](/packages/bizley-ajaxdropdown) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)