{"id":20961788,"url":"https://github.com/heimrichhannot/contao-autocompletejs-bundle","last_synced_at":"2025-05-14T07:31:03.251Z","repository":{"id":62515435,"uuid":"291704302","full_name":"heimrichhannot/contao-autocompletejs-bundle","owner":"heimrichhannot","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-05T08:48:59.000Z","size":92,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-18T06:55:11.781Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heimrichhannot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-08-31T12:05:55.000Z","updated_at":"2024-12-05T08:48:38.000Z","dependencies_parsed_at":"2024-02-20T15:50:16.025Z","dependency_job_id":null,"html_url":"https://github.com/heimrichhannot/contao-autocompletejs-bundle","commit_stats":{"total_commits":22,"total_committers":5,"mean_commits":4.4,"dds":0.5909090909090908,"last_synced_commit":"fd572dfeb731442991da2f66a0356f7788a84739"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-autocompletejs-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-autocompletejs-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-autocompletejs-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heimrichhannot%2Fcontao-autocompletejs-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heimrichhannot","download_url":"https://codeload.github.com/heimrichhannot/contao-autocompletejs-bundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254094852,"owners_count":22013648,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T02:17:23.119Z","updated_at":"2025-05-14T07:31:03.236Z","avatar_url":"https://github.com/heimrichhannot.png","language":"PHP","readme":"# Contao autoCompleteJs Bundle\n\nThis bundle offers support for the JavaScript library [autoComplete.js](https://github.com/TarekRaafat/autoComplete.js) for the Contao CMS.\n\n## Features\n\n- activate autocompletejs support on page level (with inheritance and override option)\n- customize options from dca\n- [Encore Contracts](https://github.com/heimrichhannot/contao-encore-contracts) support\n\n## Installation\n\nInstall via composer: `composer require heimrichhannot/contao-autocompletejs-bundle` and update your database.\n\n## Usage\n\nActive or deactivate autocompletejs support on page level (Layout section). You can overwrite settings from a parent page.\n\n### DCA configuration\nTo activate autocompletejs on a dca field add  \n\nAdd `autocompletejs` configuration to the `eval` array of dca field :\n```php\n    'fieldName' =\u003e [\n        'eval' = [\n            'autocompletejs' =\u003e [ \n                'active' =\u003e true,\n                'options' =\u003e []\n            ]\n        ]\n    ]\n```\n\n#### Example: load data from an API\n\n```php\n    'fieldName' =\u003e [\n        'eval' = [\n            'autocompletejs' =\u003e [ \n                'active' =\u003e true,\n                'options' =\u003e [\n                    'data' =\u003e [\n                        'url' =\u003e 'https://example.org/users/{query}',\n                        'keys' =\u003e ['name', 'city'],\n                    ]\n                ]\n            ]\n        ]\n    ]\n```\n\nReturn value of the api must be an array of objects. The object keys defined in `data.keys` will be used to display the results.\n\n```json\n[\n    {\n        \"name\": \"John Doe\",\n        \"city\": \"New York\"\n    },\n    {\n        \"name\": \"Jane Doe\",\n        \"city\": \"Los Angeles\"\n    }\n]\n```\n\n#### Configuration options\n\n| Option name  | Type    | Value                                                       |\n|--------------|---------|-------------------------------------------------------------|\n| data         | Array   | type, url, key, cache                                       |\n| data.url     | String  | url to be fetched for data                                  |\n| data.src     | Array   | array of values if autocomplete options are static values   |\n| data.keys    | Array   | keys of the data array if available                         |\n| data.cache   | Boolean | cache the input, must be 'false' if data.type is a function |\n| searchEngine | String  | 'strict', 'loose' or 'none'                                 |\n| placeHolder  | String  | placeholder of the input field                              |\n| selector     | String  | id of the input field                                       |\n| threshold    | Integer | minimum number of characters to trigger autocomplete        |\n| debounce     | Integer | idle time after entering new character (milliseconds)       |\n| maxResults   | Integer | maximum number of results shown in the dropdown menu        |\n| highlight    | Boolean | show entered characters in the results dropdown menu        |\n\nYou can also set all options of the library (see [more](https://tarekraafat.github.io/autoComplete.js/#/configuration)).\n\n#### Custom configuration values\nThis bundle has a new value for `searchEngine` option : 'none' \n\nSet `searchEngine : 'none'` if no search algorithm should be applied to the result list. \nThis comes handy if your results are allready searched(eg. result list from an API)\n\n### Styling\n\nA number of custom css properties is available to style the autocompletejs dropdown menu. \n\nThe following properties define the overall theme of the dropdown menu and can be overridden for easy styling:\n\n```css\n.root {\n    --huh-autocomplete-clr-text: black;\n    --huh-autocomplete-clr-bg: white;\n    --huh-autocomplete-clr-bg-hover: whitesmoke;\n    --huh-autocomplete-clr-border: var(--bs-primary, var(--huh-autocomplete-clr-text, black));\n}\n```\n\nTake a look at [autocomplete-bundle.scss](src/Resources/assets/scss/autocomplete-bundle.scss) for a list of all available css properties for further customization.\n\n## Events\n| Event name                          | Description                              |\n|-------------------------------------|------------------------------------------|\n| CustomizeAutocompletejsOptionsEvent | Used to modify options provided from dca |\n\n### JavaScript Events\nFollowing events can be used to further customize the autocompletejs instances: \n\nEvent name | Data | Description\n---------- | ---- | -----------\nhuh.autocompletejs.adjust_result_item | field, item | Customize matched Item in the dropdown menu (`resultItem` configuration option of the autoComplete object)\nhuh.autocompletejs.onselection | source, data | Customize selection behavior of selected Item (`onSelection` configuration options of the autoComplete object)\n\n### ***!!!Caution!!!*** Known limitations\nWhen 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:\n```JSON\n{\n    \"0\" : {\"key\" : \"value\"},\n    \"1\" : {\"key\" : \"value\"},\n    \"3\" : {\"key\" : \"value\"}\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheimrichhannot%2Fcontao-autocompletejs-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheimrichhannot%2Fcontao-autocompletejs-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheimrichhannot%2Fcontao-autocompletejs-bundle/lists"}