diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk index b49ced69b6..33748171e7 100644 --- a/src/components/autosuggest/_macro.njk +++ b/src/components/autosuggest/_macro.njk @@ -3,7 +3,7 @@ {% macro onsAutosuggest(params) %}
{ 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 index 550b4a1d10..f652d4a5a8 100644 --- 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) => {