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 a96549af0a4..8cdcb5f5d21 100644 --- a/src/Autocomplete/assets/dist/controller.js +++ b/src/Autocomplete/assets/dist/controller.js @@ -87,8 +87,14 @@ var controller_default = class extends Controller { urlValueChanged() { this.resetTomSelect(); } - getMaxOptions() { - return this.selectElement ? this.selectElement.options.length : 50; + getMaxOptions(hasRemoteData = false) { + if (this.maxOptionsValue) { + return this.maxOptionsValue; + } + if (!hasRemoteData && this.selectElement) { + return this.selectElement.options.length; + } + return 50; } /** * Returns the element, but only if it's a select element. @@ -342,6 +348,7 @@ createAutocompleteWithRemoteData_fn = function(autocompleteEndpointUrl, minChara } return query.length >= 3; }, + maxOptions: this.getMaxOptions(true), optgroupField: "group_by", // avoid extra filtering after results are returned score: (search) => (item) => 1, @@ -398,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 8be9ab53594..c6b5e0935f7 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,6 +294,7 @@ export default class extends Controller { return query.length >= 3; }, + maxOptions: this.getMaxOptions(true), optgroupField: 'group_by', // avoid extra filtering after results are returned score: (search: string) => (item: any) => 1, @@ -317,8 +320,16 @@ export default class extends Controller { return this.#createTomSelect(config); } - private getMaxOptions(): number { - return this.selectElement ? this.selectElement.options.length : 50; + private getMaxOptions(hasRemoteData: boolean = false): number { + if (this.maxOptionsValue) { + return this.maxOptionsValue; + } + + if (!hasRemoteData && 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,