update autosggest

ONSdigital · Oct 14, 2024 · 52e3d75 · 52e3d75
1 parent daab31b
commit 52e3d75
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk
@@ -3,7 +3,7 @@
 {% macro onsAutosuggest(params) %}
     <div
         id="{{ params.id }}-container"
-        class="ons-autosuggest{{ ' ons-js-autosuggest' if not params.externalInitialiser }}{{ ' ons-autosuggest__results-extended-' + params.extendedSearch if params.extendedSearch }}{{ ' ons-js-address-not-editable' if params.isEditable == false }}{{ ' ons-js-address-mandatory' if params.mandatory == true }}{{ ' ' + params.containerClasses if params.containerClasses else '' }}"
+        class="ons-autosuggest{{ ' ons-js-autosuggest' if not params.externalInitialiser }}{{ ' ons-js-address-not-editable' if params.isEditable == false }}{{ ' ons-js-address-mandatory' if params.mandatory == true }}{{ ' ' + params.containerClasses if params.containerClasses else '' }}"
         data-instructions="{{ params.instructions }}"
         data-aria-you-have-selected="{{ params.ariaYouHaveSelected }}"
         data-min-chars="{{ params.minChars }}"
@@ -15,6 +15,7 @@
         data-results-title="{{ params.resultsTitle }}"
         data-no-results="{{ params.noResults }}"
         data-type-more="{{ params.typeMore }}"
+        data-extended-search="{{ params.extendedSearch }}"
         {% if params.apiDomain %}data-api-domain="{{ params.apiDomain }}"{% endif %}
         {% if params.apiDomainBearerToken %}data-authorization-token="{{ params.apiDomainBearerToken }}"{% endif %}
         {% if params.apiManualQueryParams == true %}data-query-params=""{% endif %}

diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js
@@ -32,6 +32,11 @@ const EXAMPLE_AUTOSUGGEST = {
     typeMore: 'Continue entering to get suggestions',
 };
 
+const EXAMPLE_AUTOSUGGEST_WITH_EXTENDED_SEARCH = {
+    ...EXAMPLE_AUTOSUGGEST,
+    extendedSearch: 0.5,
+};
+
 describe('macro: autosuggest', () => {
     it('passes jest-axe checks', async () => {
         const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
@@ -47,7 +52,7 @@ describe('macro: autosuggest', () => {
     });
 
     it('has the provided data attributes', () => {
-        const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+        const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST_WITH_EXTENDED_SEARCH));
 
         const $element = $('.ons-autosuggest');
         expect($element.attr('data-allow-multiple')).toBeUndefined();
@@ -63,6 +68,7 @@ describe('macro: autosuggest', () => {
         expect($element.attr('data-no-results')).toBe('No suggestions found. You can enter your own answer');
         expect($element.attr('data-results-title')).toBe('Suggestions');
         expect($element.attr('data-type-more')).toBe('Continue entering to get suggestions');
+        expect($element.attr('data-extended-search')).toBe('0.5');
     });
 
     it('has the `data-allow-multiple` attribute when `allowMultiple` is `true`', () => {

diff --git a/src/components/autosuggest/autosuggest.ui.js b/src/components/autosuggest/autosuggest.ui.js
@@ -37,6 +37,7 @@ export default class AutosuggestUI {
         errorAPI,
         errorAPILinkText,
         typeMore,
+        extendedSearchThreshold,
     }) {
         // DOM Elements
         this.context = context;
@@ -65,6 +66,7 @@ export default class AutosuggestUI {
         this.errorAPI = errorAPI || context.getAttribute('data-error-api');
         this.errorAPILinkText = errorAPILinkText || context.getAttribute('data-error-api-link-text');
         this.typeMore = typeMore || context.getAttribute('data-type-more');
+        this.extendedSearchThreshold = extendedSearchThreshold || context.getAttribute('data-extended-search');
         this.language = context.getAttribute('data-lang');
         this.allowMultiple = context.getAttribute('data-allow-multiple') || false;
         this.listboxId = this.listbox.getAttribute('id');
@@ -294,15 +296,7 @@ export default class AutosuggestUI {
     async fetchSuggestions(sanitisedQuery, data) {
         this.abortFetch();
 
-        //const threshold = this.context.classList.includes('ons-autosuggest__results-extended-') ? 0.4 : 0.2;
-        const classList = Array.from(this.context.classList);
-        const thresholdClass = classList.find((className) => className.startsWith('ons-autosuggest__results-extended-'));
-        const extendedSearchThreshold = thresholdClass
-            ? parseFloat(thresholdClass.match(/ons-autosuggest__results-extended-([\d.]+)/)[1])
-            : null;
-        // validation needs to be discussed and done for this
-        const threshold = extendedSearchThreshold !== null ? extendedSearchThreshold : 0.2;
-        //console.log(threshold);
+        const threshold = this.extendedSearchThreshold >= 0 && this.extendedSearchThreshold <= 1 ? this.extendedSearchThreshold : 0.2;
         const results = await runFuse(sanitisedQuery, data, this.lang, threshold, this.resultLimit);
 
         results.forEach((result) => {