fix search

DEFRA · Oct 17, 2024 · 29d660a · 29d660a
1 parent 3affd36
commit 29d660a
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 86 deletions.
diff --git a/src/client/assets/javascripts/application.js b/src/client/assets/javascripts/application.js
@@ -12,57 +12,4 @@ import './plant-search.js'
 import './pest-search.js'
 import './country-search.js'
 
-function compareNames(a, b) {
- if (a.text < b.text) {
- return -1
- }
- if (a.text > b.text) {
- return 1
- }
- return 0
-}
-
-export function timerFunction(query, finalArray, populateResults) {
- return setTimeout(async () => {
- try {
- if (query.length > 2) {
- return populateResults(finalArray.sort(compareNames))
- }
- } catch (error) {
- // TypeError: Failed to fetch
- // console.log('Error fetching suggestions:', error)
- }
- }, 1000)
-}
-
-export function inputValueTemplate(asd) {
- return asd?.text
-}
-
-export function suggestionTemplate(asd, regexValue) {
- const inputElementCustom =
- document.getElementsByClassName('custom-hint-class')
- inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint')
- inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint')
- let template
- if (regexValue?.length > 0) {
- template =
- '<div class="suggestions"><span class="name" id="resultName">' +
- asd?.text?.replace(
- new RegExp(regexValue, 'gi'),
- (match) => `<strong>${match}</strong>`
- ) +
- '</span></div>'
- } else {
- template =
- '<div class="suggestions"><span class="name" id="resultName">' +
- asd?.replace(
- new RegExp(asd, 'gi'),
- (match) => `<strong>${match}</strong>`
- ) +
- '</span></div>'
- }
- return template
-}
-
 initAll()
diff --git a/src/client/assets/javascripts/country-search.js b/src/client/assets/javascripts/country-search.js
@@ -1,9 +1,4 @@
 import accessibleAutocomplete from './accessible-autocomplete.min.js'
-import {
- timerFunction,
- inputValueTemplate,
- suggestionTemplate
-} from './application.js'
 
 let finalArray = []
 let timer
@@ -16,10 +11,29 @@ async function fetchSuggestions(query, populateResults) {
  defaultcountryCode?.setAttribute('value', null)
  const apiUrl = '/search/countries?searchQuery=' + query
  await clearTimeout(timer)
- const response = await fetch(apiUrl)
- const responseJSON = await response.json()
- await renderSuggestions(responseJSON, query)
- timer = timerFunction(query, finalArray, populateResults)
+ function compareNames(a, b) {
+ if (a.text < b.text) {
+ return -1
+ }
+ if (a.text > b.text) {
+ return 1
+ }
+ return 0
+ }
+
+ timer = setTimeout(async () => {
+ try {
+ if (query.length > 2) {
+ const response = await fetch(apiUrl)
+ const responseJSON = await response.json()
+ await renderSuggestions(responseJSON, query)
+ return populateResults(finalArray.sort(compareNames))
+ }
+ } catch (error) {
+ // TypeError: Failed to fetch
+ // console.log('Error fetching suggestions:', error)
+ }
+ }, 1000)
 }
 let regexValue, suggestions
 async function renderSuggestions(json, query) {
@@ -82,10 +96,32 @@ if (document.querySelector('#my-autocomplete-country-container')) {
  showNoOptionsFound: false,
  templates: {
  inputValue: function (asd) {
- return inputValueTemplate(asd)
+ return asd?.text
  },
  suggestion: function (asd) {
- return suggestionTemplate(asd, regexValue)
+ const inputElementCustom =
+ document.getElementsByClassName('custom-hint-class')
+ inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint')
+ inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint')
+ if (regexValue?.length > 0) {
+ return (
+ '<div class="suggestions"><span class="name" id="resultName">' +
+ asd?.text?.replace(
+ new RegExp(regexValue, 'gi'),
+ (match) => `<strong>${match}</strong>`
+ ) +
+ '</span></div>'
+ )
+ } else {
+ return (
+ '<div class="suggestions"><span class="name" id="resultName">' +
+ asd?.replace(
+ new RegExp(asd, 'gi'),
+ (match) => `<strong>${match}</strong>`
+ ) +
+ '</span></div>'
+ )
+ }
  }
  },
  onConfirm

diff --git a/src/client/assets/javascripts/pest-search.js b/src/client/assets/javascripts/pest-search.js
@@ -1,9 +1,5 @@
 import accessibleAutocomplete from './accessible-autocomplete.min.js'
-import {
- timerFunction,
- inputValueTemplate,
- suggestionTemplate
-} from './application.js'
+
 let finalArray = []
 let timer
 
@@ -15,10 +11,29 @@ async function fetchSuggestions(query, populateResults) {
  defaultcslref?.setAttribute('value', null)
  const apiUrl = '/search/pests?searchQuery=' + query
  await clearTimeout(timer)
- const response = await fetch(apiUrl)
- const responseJSON = await response.json()
- await renderSuggestions(responseJSON, query)
- timer = timerFunction(query, finalArray, populateResults)
+ function compareNames(a, b) {
+ if (a.text < b.text) {
+ return -1
+ }
+ if (a.text > b.text) {
+ return 1
+ }
+ return 0
+ }
+
+ timer = setTimeout(async () => {
+ try {
+ if (query.length > 2) {
+ const response = await fetch(apiUrl)
+ const responseJSON = await response.json()
+ await renderSuggestions(responseJSON, query)
+ return populateResults(finalArray.sort(compareNames))
+ }
+ } catch (error) {
+ // TypeError: Failed to fetch
+ // console.log('Error fetching suggestions:', error)
+ }
+ }, 1000)
 }
 let regexValue
 async function renderSuggestions(json, query) {
@@ -326,10 +341,32 @@ if (document.querySelector('#my-autocomplete-pest-container')) {
  showNoOptionsFound: false,
  templates: {
  inputValue: function (asd) {
- return inputValueTemplate(asd)
+ return asd?.text
  },
  suggestion: function (asd) {
- return suggestionTemplate(asd, regexValue)
+ const inputElementCustom =
+ document.getElementsByClassName('custom-hint-class')
+ inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint')
+ inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint')
+ if (regexValue?.length > 0) {
+ return (
+ '<div class="suggestions"><span class="name" id="resultName">' +
+ asd?.text?.replace(
+ new RegExp(regexValue, 'gi'),
+ (match) => `<strong>${match}</strong>`
+ ) +
+ '</span></div>'
+ )
+ } else {
+ return (
+ '<div class="suggestions"><span class="name" id="resultName">' +
+ asd?.replace(
+ new RegExp(asd, 'gi'),
+ (match) => `<strong>${match}</strong>`
+ ) +
+ '</span></div>'
+ )
+ }
  }
  },
  onConfirm

diff --git a/src/client/assets/javascripts/plant-search.js b/src/client/assets/javascripts/plant-search.js
@@ -1,9 +1,4 @@
 import accessibleAutocomplete from './accessible-autocomplete.min.js'
-import {
- timerFunction,
- inputValueTemplate,
- suggestionTemplate
-} from './application.js'
 
 let finalArray = []
 let timer
@@ -15,10 +10,30 @@ async function fetchSuggestions(query, populateResults) {
  defaulthostref?.setAttribute('value', '')
  const apiUrl = '/search/plants?searchQuery=' + query
  await clearTimeout(timer)
- const response = await fetch(apiUrl)
- const responseJSON = await response.json()
- await renderSuggestions(responseJSON, query)
- timer = timerFunction(query, finalArray, populateResults)
+ function compareNames(a, b) {
+ if (a.text < b.text) {
+ return -1
+ }
+ if (a.text > b.text) {
+ return 1
+ }
+ return 0
+ }
+
+ timer = setTimeout(async () => {
+ try {
+ if (query.length > 2) {
+ const response = await fetch(apiUrl)
+ const responseJSON = await response.json()
+
+ await renderSuggestions(responseJSON, query)
+ return populateResults(finalArray.sort(compareNames))
+ }
+ } catch (error) {
+ // TypeError: Failed to fetch
+ // console.log('Error fetching suggestions:', error)
+ }
+ }, 1000)
 }
 let regexValue
 async function renderSuggestions(json, query) {
@@ -316,10 +331,32 @@ if (document.querySelector('#my-autocomplete-container')) {
  showNoOptionsFound: false,
  templates: {
  inputValue: function (asd) {
- return inputValueTemplate(asd)
+ return asd?.text
  },
  suggestion: function (asd) {
- return suggestionTemplate(asd, regexValue)
+ const inputElementCustom =
+ document.getElementsByClassName('custom-hint-class')
+ inputElementCustom[0]?.setAttribute('aria-label', 'autocomplete__hint')
+ inputElementCustom[0]?.setAttribute('id', 'autocomplete__hint')
+ if (regexValue?.length > 0) {
+ return (
+ '<div class="suggestions"><span class="name" id="resultName">' +
+ asd?.text?.replace(
+ new RegExp(regexValue, 'gi'),
+ (match) => `<strong>${match}</strong>`
+ ) +
+ '</span></div>'
+ )
+ } else {
+ return (
+ '<div class="suggestions"><span class="name" id="resultName">' +
+ asd?.replace(
+ new RegExp(asd, 'gi'),
+ (match) => `<strong>${match}</strong>`
+ ) +
+ '</span></div>'
+ )
+ }
  }
  },
  onConfirm