From ed5e02ea7536df805347854b853d0020284da7e5 Mon Sep 17 00:00:00 2001 From: Kevin <93974249+kevinmade@users.noreply.github.com> Date: Wed, 4 Jun 2025 15:24:13 +0200 Subject: [PATCH 1/5] Add maxOptions to autocomplete with remote data --- src/Autocomplete/assets/dist/controller.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Autocomplete/assets/dist/controller.js b/src/Autocomplete/assets/dist/controller.js index b9712824880..a16c9efbd52 100644 --- a/src/Autocomplete/assets/dist/controller.js +++ b/src/Autocomplete/assets/dist/controller.js @@ -341,6 +341,7 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def } return query.length >= 3; }, + maxOptions: null, optgroupField: 'group_by', score: (search) => (item) => 1, render: { From 3b4119b87b0512698018c9b14404dcf082c5ca26 Mon Sep 17 00:00:00 2001 From: Kevin Sliedrecht Date: Thu, 5 Jun 2025 13:29:20 +0200 Subject: [PATCH 2/5] Move maxOptions from autocomplete dist to source --- src/Autocomplete/assets/dist/controller.js | 1 - src/Autocomplete/assets/src/controller.ts | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Autocomplete/assets/dist/controller.js b/src/Autocomplete/assets/dist/controller.js index a16c9efbd52..b9712824880 100644 --- a/src/Autocomplete/assets/dist/controller.js +++ b/src/Autocomplete/assets/dist/controller.js @@ -341,7 +341,6 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def } return query.length >= 3; }, - maxOptions: null, optgroupField: 'group_by', score: (search) => (item) => 1, render: { diff --git a/src/Autocomplete/assets/src/controller.ts b/src/Autocomplete/assets/src/controller.ts index f89b29141c4..f7164ff7964 100644 --- a/src/Autocomplete/assets/src/controller.ts +++ b/src/Autocomplete/assets/src/controller.ts @@ -292,6 +292,7 @@ export default class extends Controller { return query.length >= 3; }, + maxOptions: null, optgroupField: 'group_by', // avoid extra filtering after results are returned score: (search: string) => (item: any) => 1, From 16e66556b7e99354f828623a118499d38fe78345 Mon Sep 17 00:00:00 2001 From: Kevin Sliedrecht Date: Thu, 5 Jun 2025 14:22:07 +0200 Subject: [PATCH 3/5] Add build autocomplete dist files --- src/Autocomplete/assets/dist/controller.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Autocomplete/assets/dist/controller.js b/src/Autocomplete/assets/dist/controller.js index b9712824880..a16c9efbd52 100644 --- a/src/Autocomplete/assets/dist/controller.js +++ b/src/Autocomplete/assets/dist/controller.js @@ -341,6 +341,7 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def } return query.length >= 3; }, + maxOptions: null, optgroupField: 'group_by', score: (search) => (item) => 1, render: { From b463ef2f7475431ff583c8f842ef2670ce0d9987 Mon Sep 17 00:00:00 2001 From: Kevin Sliedrecht Date: Mon, 29 Sep 2025 11:39:29 +0200 Subject: [PATCH 4/5] Introduce autocomplete_max_options --- src/Autocomplete/assets/dist/controller.d.ts | 2 ++ src/Autocomplete/assets/dist/controller.js | 11 +++++++++-- src/Autocomplete/assets/src/controller.ts | 14 ++++++++++++-- src/Autocomplete/doc/index.rst | 3 +++ .../src/Form/AutocompleteChoiceTypeExtension.php | 5 +++++ 5 files changed, 31 insertions(+), 4 deletions(-) diff --git a/src/Autocomplete/assets/dist/controller.d.ts b/src/Autocomplete/assets/dist/controller.d.ts index e03b841b16d..a765b7410fe 100644 --- a/src/Autocomplete/assets/dist/controller.d.ts +++ b/src/Autocomplete/assets/dist/controller.d.ts @@ -12,6 +12,7 @@ declare class export_default extends Controller { #private; static values: { url: StringConstructor; + maxOptions: NumberConstructor; optionsAsHtml: BooleanConstructor; loadingMoreText: StringConstructor; noResultsFoundText: StringConstructor; @@ -22,6 +23,7 @@ declare class export_default extends Controller { preload: StringConstructor; }; readonly urlValue: string; + readonly maxOptionsValue: number; readonly optionsAsHtmlValue: boolean; readonly loadingMoreTextValue: string; readonly noMoreResultsTextValue: string; diff --git a/src/Autocomplete/assets/dist/controller.js b/src/Autocomplete/assets/dist/controller.js index 0dfb11df38a..58e8ce97779 100644 --- a/src/Autocomplete/assets/dist/controller.js +++ b/src/Autocomplete/assets/dist/controller.js @@ -88,7 +88,13 @@ var controller_default = class extends Controller { this.resetTomSelect(); } getMaxOptions() { - return this.selectElement ? this.selectElement.options.length : 50; + if (this.maxOptionsValue) { + return this.maxOptionsValue; + } + if (this.selectElement) { + return this.selectElement.options.length; + } + return 50; } /** * Returns the element, but only if it's a select element. @@ -342,7 +348,7 @@ createAutocompleteWithRemoteData_fn = function(autocompleteEndpointUrl, minChara } return query.length >= 3; }, - maxOptions: null, + maxOptions: this.getMaxOptions(), optgroupField: "group_by", // avoid extra filtering after results are returned score: (search) => (item) => 1, @@ -399,6 +405,7 @@ createTomSelect_fn = function(options) { }; controller_default.values = { url: String, + maxOptions: Number, optionsAsHtml: Boolean, loadingMoreText: String, noResultsFoundText: String, diff --git a/src/Autocomplete/assets/src/controller.ts b/src/Autocomplete/assets/src/controller.ts index cb06fd0af18..b75602b3ab7 100644 --- a/src/Autocomplete/assets/src/controller.ts +++ b/src/Autocomplete/assets/src/controller.ts @@ -25,6 +25,7 @@ interface OptionDataStructure { export default class extends Controller { static values = { url: String, + maxOptions: Number, optionsAsHtml: Boolean, loadingMoreText: String, noResultsFoundText: String, @@ -36,6 +37,7 @@ export default class extends Controller { }; declare readonly urlValue: string; + declare readonly maxOptionsValue: number; declare readonly optionsAsHtmlValue: boolean; declare readonly loadingMoreTextValue: string; declare readonly noMoreResultsTextValue: string; @@ -292,7 +294,7 @@ export default class extends Controller { return query.length >= 3; }, - maxOptions: null, + maxOptions: this.getMaxOptions(), optgroupField: 'group_by', // avoid extra filtering after results are returned score: (search: string) => (item: any) => 1, @@ -319,7 +321,15 @@ export default class extends Controller { } private getMaxOptions(): number { - return this.selectElement ? this.selectElement.options.length : 50; + if (this.maxOptionsValue) { + return this.maxOptionsValue; + } + + if (this.selectElement) { + return this.selectElement.options.length; + } + + return 50; } #stripTags(string: string): string { diff --git a/src/Autocomplete/doc/index.rst b/src/Autocomplete/doc/index.rst index 972479d7fe3..1ed154fd2f4 100644 --- a/src/Autocomplete/doc/index.rst +++ b/src/Autocomplete/doc/index.rst @@ -216,6 +216,9 @@ e.g. ``FoodAutocompleteField`` from above): an autocomplete-Ajax endpoint (e.g. for a custom ``ChoiceType``), then set this to change the field into an AJAX-powered select. +``autocomplete_max_options`` (default: ``50``) + Limits the maximum number of results displayed in the autocomplete dropdown at once. + ``loading_more_text`` (default: 'Loading more results...') Rendered at the bottom of the list while fetching more results. This message is automatically translated using the ``AutocompleteBundle`` domain. diff --git a/src/Autocomplete/src/Form/AutocompleteChoiceTypeExtension.php b/src/Autocomplete/src/Form/AutocompleteChoiceTypeExtension.php index 149805e99e6..ebecbc4f92d 100644 --- a/src/Autocomplete/src/Form/AutocompleteChoiceTypeExtension.php +++ b/src/Autocomplete/src/Form/AutocompleteChoiceTypeExtension.php @@ -64,6 +64,10 @@ public function finishView(FormView $view, FormInterface $form, array $options): $values['url'] = $form->getConfig()->getAttribute('autocomplete_url'); } + if ($options['autocomplete_max_options']) { + $values['max-options'] = $options['autocomplete_max_options']; + } + if ($options['options_as_html']) { $values['options-as-html'] = ''; } @@ -142,6 +146,7 @@ public function configureOptions(OptionsResolver $resolver): void $resolver->setDefaults([ 'autocomplete' => false, 'autocomplete_url' => null, + 'autocomplete_max_options' => 50, 'tom_select_options' => [], 'options_as_html' => false, 'allow_options_create' => false, From 2bbdffe776f8f445294b62ae4a00dbe1f3cf75db Mon Sep 17 00:00:00 2001 From: Kevin Sliedrecht Date: Mon, 29 Sep 2025 13:15:21 +0200 Subject: [PATCH 5/5] Fix autocomplete unit tests --- src/Autocomplete/assets/dist/controller.js | 6 +++--- src/Autocomplete/assets/src/controller.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Autocomplete/assets/dist/controller.js b/src/Autocomplete/assets/dist/controller.js index 58e8ce97779..8cdcb5f5d21 100644 --- a/src/Autocomplete/assets/dist/controller.js +++ b/src/Autocomplete/assets/dist/controller.js @@ -87,11 +87,11 @@ var controller_default = class extends Controller { urlValueChanged() { this.resetTomSelect(); } - getMaxOptions() { + getMaxOptions(hasRemoteData = false) { if (this.maxOptionsValue) { return this.maxOptionsValue; } - if (this.selectElement) { + if (!hasRemoteData && this.selectElement) { return this.selectElement.options.length; } return 50; @@ -348,7 +348,7 @@ createAutocompleteWithRemoteData_fn = function(autocompleteEndpointUrl, minChara } return query.length >= 3; }, - maxOptions: this.getMaxOptions(), + maxOptions: this.getMaxOptions(true), optgroupField: "group_by", // avoid extra filtering after results are returned score: (search) => (item) => 1, diff --git a/src/Autocomplete/assets/src/controller.ts b/src/Autocomplete/assets/src/controller.ts index b75602b3ab7..c6b5e0935f7 100644 --- a/src/Autocomplete/assets/src/controller.ts +++ b/src/Autocomplete/assets/src/controller.ts @@ -294,7 +294,7 @@ export default class extends Controller { return query.length >= 3; }, - maxOptions: this.getMaxOptions(), + maxOptions: this.getMaxOptions(true), optgroupField: 'group_by', // avoid extra filtering after results are returned score: (search: string) => (item: any) => 1, @@ -320,12 +320,12 @@ export default class extends Controller { return this.#createTomSelect(config); } - private getMaxOptions(): number { + private getMaxOptions(hasRemoteData: boolean = false): number { if (this.maxOptionsValue) { return this.maxOptionsValue; } - if (this.selectElement) { + if (!hasRemoteData && this.selectElement) { return this.selectElement.options.length; }