https://housemetric.co.uk/static/autocompletesettings.js

1// The autoComplete.js Engine instance creator
2const autoCompleteJS = new autoComplete({
3  data: {
4    src: async () => {
5      try {
6        // Loading placeholder text
7        document.getElementById("autoComplete").setAttribute("placeholder", "Loading...");
8        // Fetch Data from external Source
9        const inputElement = document.querySelector("#autoComplete");
10        let strq = inputElement.value;
11        // Replace comma and space with a single space and make lower case
12        strq = strq.replace(/, /g, ' ').toLowerCase();
13        const source = await fetch(`/autocomplt?q=${encodeURIComponent(strq)}`);
14        const data = await source.json(); // Data is array of `Objects` | `Strings`
15        // Post Loading placeholder text
16        inputElement.setAttribute("placeholder", autoCompleteJS.placeHolder);
17        // Returns Fetched data
18        return data;
19      } catch (error) {
20        return error;
21      }
22    },
23    keys: ["slabel"]
24  },
25  trigger: (query) => {
26    if (query.replace(/ /g, "").length >= 3) { //threshold, only start engine if string is long enough
27      var numberInFirstThreeRegEx = /^[0-9]{1,3}/;
28      var startsWithFlatRegEx = /^flat/i;
29      return !(numberInFirstThreeRegEx.test(query.replace(/ /g, "")) || startsWithFlatRegEx.test(query.trim())); // Returns false if there's a number in the first 3 characters or starts with "flat"
30    } else {
31      return false; //returning false stops the engine
32    }
33  },
34  placeHolder: "Search postcode or street",
35  debounce: 150, // Milliseconds value
36  resultsList: {
37    maxResults: 100 //look at autocomplete endpoint in miscpy
38  },
39  resultItem: {
40    element: (item, data) => {
41      // Modify Results Item Style
42      item.style = "";
43      // Modify Results Item Content
44      item.innerHTML = `<a style="display: flex;" href="${data.value.slink}" class="text-decoration-none">
45      <div style="display: flex; justify-content: space-between;">
46      <span style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
47      ${data.match}</span>
48      </div>
49      </a>`;
50    },
51    highlight: false
52  },
53  submit: true  //submit form when enter is pressed
54});
55
56// Ensure selecting with arrow keys and pressing enter works:
57autoCompleteJS.input.addEventListener("selection", function (event) {
58  const feedback = event.detail;
59  window.location = feedback.selection.value.slink;
60  autoCompleteJS.input.blur();
61});
62
63// // Add event listener to set the top_suggestion parameter
64// document.getElementById('searchForm').addEventListener('submit', function(event) {
65//   const topSuggestion = autoCompleteJS.feedback && autoCompleteJS.feedback.results[0];
66//   if (topSuggestion) {
67//     const topSuggestionInput = document.createElement('input');
68//     topSuggestionInput.type = 'hidden';
69//     topSuggestionInput.name = 'top_suggestion';
70//     topSuggestionInput.value = topSuggestion.value.slabel;
71//     this.appendChild(topSuggestionInput);
72//   }
73// });