Download the PHP package heimrichhannot/contao-autocompletejs-bundle without Composer
On this page you can find all versions of the php package heimrichhannot/contao-autocompletejs-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download heimrichhannot/contao-autocompletejs-bundle
More information about heimrichhannot/contao-autocompletejs-bundle
Files in heimrichhannot/contao-autocompletejs-bundle
Package contao-autocompletejs-bundle
Short Description This bundle offers support for autocomplete.js for the Contao CMS.
License LGPL-3.0-or-later
Homepage https://github.com/heimrichhannot/contao-autocompletejs-bundle
Informations about the package contao-autocompletejs-bundle
Contao autoCompleteJs Bundle
This bundle offers support for the JavaScript library autoComplete.js for the Contao CMS.
Features
- activate autocompletejs support on page level (with inheritance and override option)
- customize options from dca
- Encore Contracts support
Installation
Install via composer: composer require heimrichhannot/contao-autocompletejs-bundle
and update your database.
Usage
Active or deactivate autocompletejs support on page level (Layout section). You can overwrite settings from a parent page.
DCA configuration
To activate autocompletejs on a dca field add
Add autocompletejs
configuration to the eval
array of dca field :
Example: load data from an API
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.
Configuration options
Option name | Type | Value |
---|---|---|
data | Array | type, url, key, cache |
data.url | String | url to be fetched for data |
data.src | Array | array of values if autocomplete options are static values |
data.keys | Array | keys of the data array if available |
data.cache | Boolean | cache the input, must be 'false' if data.type is a function |
searchEngine | String | 'strict', 'loose' or 'none' |
placeHolder | String | placeholder of the input field |
selector | String | id of the input field |
threshold | Integer | minimum number of characters to trigger autocomplete |
debounce | Integer | idle time after entering new character (milliseconds) |
maxResults | Integer | maximum number of results shown in the dropdown menu |
highlight | Boolean | show entered characters in the results dropdown menu |
You can also set all options of the library (see more).
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
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:
Take a look at autocomplete-bundle.scss for a list of all available css properties for further customization.
Events
Event name | Description |
---|---|
CustomizeAutocompletejsOptionsEvent | Used to modify options provided from dca |
JavaScript Events
Following events can be used to further customize the autocompletejs instances:
Event name | Data | Description |
---|---|---|
huh.autocompletejs.adjust_result_item | field, item | Customize matched Item in the dropdown menu (resultItem configuration option of the autoComplete object) |
huh.autocompletejs.onselection | source, data | Customize selection behavior of selected Item (onSelection configuration options of the autoComplete object) |
!!!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:
All versions of contao-autocompletejs-bundle with dependencies
ext-json Version *
contao/core-bundle Version ^4.9
heimrichhannot/contao-encore-contracts Version ^1.0
heimrichhannot/contao-utils-bundle Version ^2.177
symfony/deprecation-contracts Version ^1.0 || ^2.0 || ^3.0
symfony/event-dispatcher-contracts Version ^1.0 || ^2.0 || ^3.0