PHPackages heimrichhannot/contao-autocompletejs-bundle - 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. heimrichhannot/contao-autocompletejs-bundle ActiveContao-bundle[Utility & Helpers](/categories/utility) heimrichhannot/contao-autocompletejs-bundle =========================================== This bundle offers support for autocomplete.js for the Contao CMS. 0.3.17(1y ago)58611LGPL-3.0-or-laterPHPPHP ^7.4 || ^8.0 Since Sep 15Pushed 1y ago5 watchersCompare [ Source](https://github.com/heimrichhannot/contao-autocompletejs-bundle)[ Packagist](https://packagist.org/packages/heimrichhannot/contao-autocompletejs-bundle)[ Docs](https://github.com/heimrichhannot/contao-autocompletejs-bundle)[ RSS](/packages/heimrichhannot-contao-autocompletejs-bundle/feed)WikiDiscussions master Synced 3w ago READMEChangelog (10)Dependencies (5)Versions (32)Used By (0) Contao autoCompleteJs Bundle ============================ [](#contao-autocompletejs-bundle) This bundle offers support for the JavaScript library [autoComplete.js](https://github.com/TarekRaafat/autoComplete.js) for the Contao CMS. Features -------- [](#features) - activate autocompletejs support on page level (with inheritance and override option) - customize options from dca - [Encore Contracts](https://github.com/heimrichhannot/contao-encore-contracts) support Installation ------------ [](#installation) Install via composer: `composer require heimrichhannot/contao-autocompletejs-bundle` and update your database. Usage ----- [](#usage) Active or deactivate autocompletejs support on page level (Layout section). You can overwrite settings from a parent page. ### DCA configuration [](#dca-configuration) To activate autocompletejs on a dca field add Add `autocompletejs` configuration to the `eval` array of dca field : ``` 'fieldName' => [ 'eval' = [ 'autocompletejs' => [ 'active' => true, 'options' => [] ] ] ] ``` #### Example: load data from an API [](#example-load-data-from-an-api) ``` 'fieldName' => [ 'eval' = [ 'autocompletejs' => [ 'active' => true, 'options' => [ 'data' => [ 'url' => 'https://example.org/users/{query}', 'keys' => ['name', 'city'], ] ] ] ] ] ``` Return value of the api must be an array of objects. The object keys defined in `data.keys` will be used to display the results. ``` [ { "name": "John Doe", "city": "New York" }, { "name": "Jane Doe", "city": "Los Angeles" } ] ``` #### Configuration options [](#configuration-options) Option nameTypeValuedataArraytype, url, key, cachedata.urlStringurl to be fetched for datadata.srcArrayarray of values if autocomplete options are static valuesdata.keysArraykeys of the data array if availabledata.cacheBooleancache the input, must be 'false' if data.type is a functionsearchEngineString'strict', 'loose' or 'none'placeHolderStringplaceholder of the input fieldselectorStringid of the input fieldthresholdIntegerminimum number of characters to trigger autocompletedebounceIntegeridle time after entering new character (milliseconds)maxResultsIntegermaximum number of results shown in the dropdown menuhighlightBooleanshow entered characters in the results dropdown menuYou can also set all options of the library (see [more](https://tarekraafat.github.io/autoComplete.js/#/configuration)). #### Custom configuration values [](#custom-configuration-values) This bundle has a new value for `searchEngine` option : 'none' Set `searchEngine : 'none'` if no search algorithm should be applied to the result list. This comes handy if your results are allready searched(eg. result list from an API) ### Styling [](#styling) A number of custom css properties is available to style the autocompletejs dropdown menu. The following properties define the overall theme of the dropdown menu and can be overridden for easy styling: ``` .root { --huh-autocomplete-clr-text: black; --huh-autocomplete-clr-bg: white; --huh-autocomplete-clr-bg-hover: whitesmoke; --huh-autocomplete-clr-border: var(--bs-primary, var(--huh-autocomplete-clr-text, black)); } ``` Take a look at [autocomplete-bundle.scss](src/Resources/assets/scss/autocomplete-bundle.scss) for a list of all available css properties for further customization. Events ------ [](#events) Event nameDescriptionCustomizeAutocompletejsOptionsEventUsed to modify options provided from dca### JavaScript Events [](#javascript-events) Following events can be used to further customize the autocompletejs instances: Event nameDataDescriptionhuh.autocompletejs.adjust\_result\_itemfield, itemCustomize matched Item in the dropdown menu (`resultItem` configuration option of the autoComplete object)huh.autocompletejs.onselectionsource, dataCustomize selection behavior of selected Item (`onSelection` configuration options of the autoComplete object)### ***!!!Caution!!!*** Known limitations [](#caution-known-limitations) When fetching data via Controller make sure returning array is numerically consecutive indexed. Or if `key` option is used the array should not be numerically indexed at all. The JSON should never looks like this: ``` { "0" : {"key" : "value"}, "1" : {"key" : "value"}, "3" : {"key" : "value"} } ``` ### Health Score 36 — LowBetter than 79% of packages Maintenance37 Infrequent updates — may be unmaintained Popularity22 Limited adoption so far Community15 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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 ~55 days Recently: every ~61 days Total 29 Last Release 574d ago PHP version history (3 changes)0.1.0PHP ^7.2 0.3.4PHP ^7.2||^8.0 0.3.5PHP ^7.4 || ^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/28ad3224d8727b622ebd229840eea6b9dbcb83eb0bd609e6ce65b614830ff538?d=identicon)[digitales@heimrich-hannot.de](/maintainers/digitales@heimrich-hannot.de) --- Top Contributors [![koertho](https://avatars.githubusercontent.com/u/12064642?v=4)](https://github.com/koertho "koertho (13 commits)")[![ericges](https://avatars.githubusercontent.com/u/25957923?v=4)](https://github.com/ericges "ericges (10 commits)")[![vvohh](https://avatars.githubusercontent.com/u/75325799?v=4)](https://github.com/vvohh "vvohh (6 commits)")[![Defcon0](https://avatars.githubusercontent.com/u/1485098?v=4)](https://github.com/Defcon0 "Defcon0 (3 commits)")[![matuweb](https://avatars.githubusercontent.com/u/13745042?v=4)](https://github.com/matuweb "matuweb (1 commits)") ### Embed Badge ![Health badge](/badges/heimrichhannot-contao-autocompletejs-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/heimrichhannot-contao-autocompletejs-bundle/health.svg)](https://phpackages.com/packages/heimrichhannot-contao-autocompletejs-bundle) ``` ### Alternatives [symfony/event-dispatcher Provides tools that allow your application components to communicate with each other by dispatching events and listening to them 8.6k1.0B4.2k](/packages/symfony-event-dispatcher)[symfony/dependency-injection Allows you to standardize and centralize the way objects are constructed in your application 4.2k455.6M9.5k](/packages/symfony-dependency-injection)[metamodels/core MetaModels core 10156.4k68](/packages/metamodels-core)[drupal/core-recommended Locked core dependencies; require this project INSTEAD OF drupal/core. 6942.5M415](/packages/drupal-core-recommended)[codefog/contao-haste haste extension for Contao Open Source CMS 46676.5k170](/packages/codefog-contao-haste)[shopware/core Shopware platform is the core for all Shopware ecommerce products. 585.6M563](/packages/shopware-core) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)