Browse Source

Add search url

CLDC-3787-Autocomplete-address-search
Manny Dinssa 1 week ago
parent
commit
39e00b28ed
  1. 11
      app/frontend/controllers/address_autocomplete_controller.js
  2. 1
      app/views/form/_address_autocomplete_question.html.erb

11
app/frontend/controllers/address_autocomplete_controller.js

@ -4,16 +4,16 @@ import 'accessible-autocomplete/dist/accessible-autocomplete.min.css'
const options = []
const fetchOptions = async (query) => {
const response = await fetch(`/address_options?query=${query}`)
const fetchOptions = async (query, searchUrl) => {
const response = await fetch(`${searchUrl}?query=${encodeURIComponent(query)}`)
const data = await response.json()
console.log(data)
return data
}
const fetchAndPopulateSearchResults = async (query, populateResults, populateOptions, selectEl) => {
const fetchAndPopulateSearchResults = async (query, populateResults, searchUrl, populateOptions, selectEl) => {
if (/\S/.test(query)) {
const results = await fetchOptions(query)
const results = await fetchOptions(query, searchUrl)
console.log(results) // address and uprn keys returned per result
populateOptions(results, selectEl)
populateResults(Object.values(results).map((o) => o.address))
@ -35,6 +35,7 @@ const populateOptions = (results, selectEl) => {
export default class extends Controller {
connect () {
const searchUrl = JSON.parse(this.element.dataset.info).search_url
const selectEl = this.element
accessibleAutocomplete.enhanceSelectElement({
@ -42,7 +43,7 @@ export default class extends Controller {
selectElement: selectEl,
minLength: 1,
source: (query, populateResults) => {
fetchAndPopulateSearchResults(query, populateResults, populateOptions, selectEl)
fetchAndPopulateSearchResults(query, populateResults, searchUrl, populateOptions, selectEl)
},
autoselect: true,
showNoOptionsFound: true,

1
app/views/form/_address_autocomplete_question.html.erb

@ -5,6 +5,7 @@
<%= f.govuk_select(question.id.to_sym,
label: legend(question, page_header, conditional),
"data-controller": "address-autocomplete",
"data-info": { search_url: address_options_url }.to_json,
caption: caption(caption_text, page_header, conditional),
hint: { text: question.hint_text&.html_safe }) do %>
<% if answers.any? %>

Loading…
Cancel
Save