[Autocomplete] Allow configuring TomSelect’s labelField

Author: MatTheCat

src/Autocomplete/assets/dist/controller.js

@@ -15,7 +15,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 function __classPrivateFieldGet(receiver, state, kind, f) {
@@ -261,22 +261,26 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
     });
     return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
 }, _default_1_createAutocompleteWithHtmlContents = function _default_1_createAutocompleteWithHtmlContents() {
-    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this), {
+    const commonConfig = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this);
+    const labelField = commonConfig.labelField ?? 'text';
+    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, commonConfig, {
         maxOptions: this.getMaxOptions(),
         score: (search) => {
             const scoringFunction = this.tomSelect.getScoreFunction(search);
             return (item) => {
-                return scoringFunction({ ...item, text: __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_stripTags).call(this, item.text) });
+                return scoringFunction({ ...item, text: __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_stripTags).call(this, item[labelField]) });
             };
         },
         render: {
-            item: (item) => `<div>${item.text}</div>`,
-            option: (item) => `<div>${item.text}</div>`,
+            item: (item) => `<div>${item[labelField]}</div>`,
+            option: (item) => `<div>${item[labelField]}</div>`,
         },
     });
     return __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_createTomSelect).call(this, config);
 }, _default_1_createAutocompleteWithRemoteData = function _default_1_createAutocompleteWithRemoteData(autocompleteEndpointUrl, minCharacterLength) {
-    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this), {
+    const commonConfig = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_getCommonConfig).call(this);
+    const labelField = commonConfig.labelField ?? 'text';
+    const config = __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_mergeObjects).call(this, commonConfig, {
         firstUrl: (query) => {
             const separator = autocompleteEndpointUrl.includes('?') ? '&' : '?';
             return `${autocompleteEndpointUrl}${separator}query=${encodeURIComponent(query)}`;
@@ -306,8 +310,8 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
         optgroupField: 'group_by',
         score: (search) => (item) => 1,
         render: {
-            option: (item) => `<div>${item.text}</div>`,
-            item: (item) => `<div>${item.text}</div>`,
+            option: (item) => `<div>${item[labelField]}</div>`,
+            item: (item) => `<div>${item[labelField]}</div>`,
             loading_more: () => {
                 return `<div class="loading-more-results">${this.loadingMoreTextValue}</div>`;
             },

src/Autocomplete/assets/src/controller.ts

@@ -177,26 +177,32 @@ export default class extends Controller {
     }
 
     #createAutocompleteWithHtmlContents(): TomSelect {
-        const config = this.#mergeObjects(this.#getCommonConfig(), {
+        const commonConfig = this.#getCommonConfig();
+        const labelField = commonConfig.labelField ?? 'text';
+
+        const config = this.#mergeObjects(commonConfig, {
             maxOptions: this.getMaxOptions(),
             score: (search: string) => {
                 const scoringFunction = this.tomSelect.getScoreFunction(search);
                 return (item: any) => {
                     // strip HTML tags from each option's searchable text
-                    return scoringFunction({ ...item, text: this.#stripTags(item.text) });
+                    return scoringFunction({ ...item, text: this.#stripTags(item[labelField]) });
                 };
             },
             render: {
-                item: (item: any) => `<div>${item.text}</div>`,
-                option: (item: any) => `<div>${item.text}</div>`,
+                item: (item: any) => `<div>${item[labelField]}</div>`,
+                option: (item: any) => `<div>${item[labelField]}</div>`,
             },
         });
 
         return this.#createTomSelect(config);
     }
 
     #createAutocompleteWithRemoteData(autocompleteEndpointUrl: string, minCharacterLength: number | null): TomSelect {
-        const config: RecursivePartial<TomSettings> = this.#mergeObjects(this.#getCommonConfig(), {
+        const commonConfig = this.#getCommonConfig();
+        const labelField = commonConfig.labelField ?? 'text';
+
+        const config: RecursivePartial<TomSettings> = this.#mergeObjects(commonConfig, {
             firstUrl: (query: string) => {
                 const separator = autocompleteEndpointUrl.includes('?') ? '&' : '?';
 
@@ -241,8 +247,8 @@ export default class extends Controller {
             // avoid extra filtering after results are returned
             score: (search: string) => (item: any) => 1,
             render: {
-                option: (item: any) => `<div>${item.text}</div>`,
-                item: (item: any) => `<div>${item.text}</div>`,
+                option: (item: any) => `<div>${item[labelField]}</div>`,
+                item: (item: any) => `<div>${item[labelField]}</div>`,
                 loading_more: (): string => {
                     return `<div class="loading-more-results">${this.loadingMoreTextValue}</div>`;
                 },