feat(autocomplete): add option to specify minimum characters for autocomplete

Author: daFish

src/Autocomplete/assets/dist/controller.js

@@ -39,7 +39,7 @@ class default_1 extends Controller {
     }
     connect() {
         if (this.urlValue) {
-            this.tomSelect = __classPrivateFieldGet(this, _instances, "m", _createAutocompleteWithRemoteData).call(this, this.urlValue);
+            this.tomSelect = __classPrivateFieldGet(this, _instances, "m", _createAutocompleteWithRemoteData).call(this, this.urlValue, this.minCharactersTextValue);
             return;
         }
         if (this.optionsAsHtmlValue) {
@@ -121,7 +121,7 @@ _instances = new WeakSet(), _getCommonConfig = function _getCommonConfig() {
         },
     });
     return __classPrivateFieldGet(this, _instances, "m", _createTomSelect).call(this, config);
-}, _createAutocompleteWithRemoteData = function _createAutocompleteWithRemoteData(autocompleteEndpointUrl) {
+}, _createAutocompleteWithRemoteData = function _createAutocompleteWithRemoteData(autocompleteEndpointUrl, minCharacterLength) {
     const config = __classPrivateFieldGet(this, _instances, "m", _mergeObjects).call(this, __classPrivateFieldGet(this, _instances, "m", _getCommonConfig).call(this), {
         firstUrl: (query) => {
             const separator = autocompleteEndpointUrl.includes('?') ? '&' : '?';
@@ -134,6 +134,10 @@ _instances = new WeakSet(), _getCommonConfig = function _getCommonConfig() {
                 .then(json => { this.setNextUrl(query, json.next_page); callback(json.results); })
                 .catch(() => callback());
         },
+        shouldLoad: function (query) {
+            const minLength = minCharacterLength ? parseInt(minCharacterLength) : 3;
+            return query.length >= minLength;
+        },
         score: function (search) {
             return function (item) {
                 return 1;
@@ -173,6 +177,7 @@ default_1.values = {
     optionsAsHtml: Boolean,
     noResultsFoundText: String,
     noMoreResultsText: String,
+    minCharacters: String,
     tomSelectOptions: Object,
 };
 

src/Autocomplete/assets/src/controller.ts

@@ -8,13 +8,15 @@ export default class extends Controller {
         optionsAsHtml: Boolean,
         noResultsFoundText: String,
         noMoreResultsText: String,
+        minCharacters: String,
         tomSelectOptions: Object,
     }
 
     readonly urlValue: string;
     readonly optionsAsHtmlValue: boolean;
     readonly noMoreResultsTextValue: string;
     readonly noResultsFoundTextValue: string;
+    readonly minCharactersTextValue: string;
     readonly tomSelectOptionsValue: object;
     tomSelect: TomSelect;
 
@@ -30,7 +32,7 @@ export default class extends Controller {
 
     connect() {
         if (this.urlValue) {
-            this.tomSelect = this.#createAutocompleteWithRemoteData(this.urlValue);
+            this.tomSelect = this.#createAutocompleteWithRemoteData(this.urlValue, this.minCharactersTextValue);
 
             return;
         }
@@ -124,7 +126,7 @@ export default class extends Controller {
         return this.#createTomSelect(config);
     }
 
-    #createAutocompleteWithRemoteData(autocompleteEndpointUrl: string): TomSelect {
+    #createAutocompleteWithRemoteData(autocompleteEndpointUrl: string, minCharacterLength: string): TomSelect {
         const config: Partial<TomSettings> = this.#mergeObjects(this.#getCommonConfig(), {
             firstUrl: (query: string) => {
                 const separator = autocompleteEndpointUrl.includes('?') ? '&' : '?';
@@ -142,6 +144,11 @@ export default class extends Controller {
                     .then(json => { this.setNextUrl(query, json.next_page); callback(json.results) })
                     .catch(() => callback());
             },
+            shouldLoad: function (query: string) {
+                const minLength = minCharacterLength ? parseInt(minCharacterLength) : 3;
+
+                return query.length >= minLength;
+            },
             // avoid extra filtering after results are returned
             score: function(search: string) {
                 return function(item: any) {

src/Autocomplete/assets/test/controller.test.ts

@@ -81,6 +81,7 @@ describe('AutocompleteController', () => {
                 data-testid="main-element"
                 data-controller="check autocomplete"
                 data-autocomplete-url-value="/path/to/autocomplete"
+                data-autocomplete-min-characters-value="3"
             ></select>
         `);
 

src/Autocomplete/src/Form/AutocompleteChoiceTypeExtension.php

@@ -71,6 +71,10 @@ public function finishView(FormView $view, FormInterface $form, array $options)
             $values['max-results'] = $options['max_results'];
         }
 
+        if ($options['min_characters']) {
+            $values['min-characters'] = $options['min_characters'];
+        }
+
         $values['no-results-found-text'] = $this->trans($options['no_results_found_text']);
         $values['no-more-results-text'] = $this->trans($options['no_more_results_text']);
 
@@ -91,6 +95,7 @@ public function configureOptions(OptionsResolver $resolver)
             'allow_options_create' => false,
             'no_results_found_text' => 'No results found',
             'no_more_results_text' => 'No more results',
+            'min_characters' => 3,
             'max_results' => 10,
         ]);