fixup! 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('?') ? '&' : '?';
@@ -135,9 +135,8 @@ _instances = new WeakSet(), _getCommonConfig = function _getCommonConfig() {
                 .catch(() => callback());
         },
         shouldLoad: function (query) {
-            if (query.length < this.minCharactersTextValue) {
-                return;
-            }
+            const minLength = minCharacterLength ? parseInt(minCharacterLength) : 3;
+            return query.length >= minLength;
         },
         score: function (search) {
             return function (item) {
@@ -178,7 +177,7 @@ default_1.values = {
     optionsAsHtml: Boolean,
     noResultsFoundText: String,
     noMoreResultsText: String,
-    minCharacters: Number,
+    minCharacters: String,
     tomSelectOptions: Object,
 };
 

src/Autocomplete/assets/src/controller.ts

@@ -8,15 +8,15 @@ export default class extends Controller {
         optionsAsHtml: Boolean,
         noResultsFoundText: String,
         noMoreResultsText: String,
-        minCharacters: Number,
+        minCharacters: String,
         tomSelectOptions: Object,
     }
 
     readonly urlValue: string;
     readonly optionsAsHtmlValue: boolean;
     readonly noMoreResultsTextValue: string;
     readonly noResultsFoundTextValue: string;
-    readonly minCharactersTextValue: number;
+    readonly minCharactersTextValue: string;
     readonly tomSelectOptionsValue: object;
     tomSelect: TomSelect;
 
@@ -32,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;
         }
@@ -126,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('?') ? '&' : '?';
@@ -145,9 +145,9 @@ export default class extends Controller {
                     .catch(() => callback());
             },
             shouldLoad: function (query: string) {
-                if (query.length < this.minCharactersTextValue) {
-                    return;
-                }
+                const minLength = minCharacterLength ? parseInt(minCharacterLength) : 3;
+
+                return query.length >= minLength;
             },
             // avoid extra filtering after results are returned
             score: function(search: string) {

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>
         `);