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) => {