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)58391LGPL-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 1w 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 37 — LowBetter than 83% of packages Maintenance39 Infrequent updates — may be unmaintained Popularity23 Limited adoption so far Community15 Small or concentrated contributor base Maturity60 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 529d 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 [codefog/contao-haste haste extension for Contao Open Source CMS 42650.8k139](/packages/codefog-contao-haste)[netgen/layouts-core Netgen Layouts enables you to build and manage complex web pages in a simpler way and with less coding. This is the core of Netgen Layouts, its heart and soul. 3689.4k10](/packages/netgen-layouts-core)[numero2/contao-storelocator Contao Plugin for managing stores (or in common address data) and providing a frontend-search based on geo data 121.5k](/packages/numero2-contao-storelocator)[netgen/content-browser Netgen Content Browser is a Symfony bundle that provides an interface which selects items from any kind of backend and returns the IDs of selected items back to the calling code. 14112.1k8](/packages/netgen-content-browser) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)