Changes, autocomplete etc.

static/css/main.css

@@ -37,9 +37,6 @@ body {
 h1, h2, h3, h4, h5{
   font-family: var(--bs-ttl-font-family);
 }
-/* ::selection, ::-moz-selection {
-  text-shadow: none;
-} */
 .navbar-toggler{
   color: var(--bs-btn-hover-bg);
 }
@@ -89,14 +86,6 @@ h1, h2, h3, h4, h5{
   margin-top: var(--top-bar);
 }
 /* Screens */
-/* [data-screen="error404"], [data-screen="connect"]{
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-[data-screen="error404"] main, [data-screen="connect"] main{
-  margin: auto 0;
-} */
 [data-screen="search"] .container-fluid > .row, [data-screen="profile"] .container-fluid > .row{
   justify-content: center;
 }
@@ -160,9 +149,6 @@ h1, h2, h3, h4, h5{
 .hero-primary, .hero-secondary{
   padding: var(--div-padding)
 }
-/* .hero-secondary{
-  min-height: 30vh;
-} */
 #lead{
   display: flex;
   height: 100%;
@@ -367,6 +353,21 @@ label[for="lang"]{
 #searchFilters label{
   font-weight: 600;
 }
+
+/* autocomplete */
+
+.autocomplete-suggestions {
+  border: 1px solid #e3e3e3;
+  max-height: 150px;
+  overflow-y: auto;
+}
+.autocomplete-suggestion {
+  padding: 8px;
+  cursor: pointer;
+}
+.autocomplete-suggestion:hover {
+  background-color: #f8f9fa;
+}
 /* overrides */
 ul, ol{
   padding-left: 1rem;

static/js/autocomplete.js

@@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const input = document.getElementById('searchedLocationInput'),
+        suggestionsContainer = document.getElementById('searchedLocationSuggestions'),
+        options = [...document.getElementById('userSearchedLocation').options];
+
+  input.addEventListener('input', () => {
+    const inputValue = input.value.toLowerCase();
+    suggestionsContainer.innerHTML = '';
+
+    if (inputValue) { options.forEach(option => {
+      const optionText = option.text.toLowerCase();
+      if (optionText.includes(inputValue)) {
+        const suggestion = document.createElement('div');
+        suggestion.classList.add('autocomplete-suggestion');
+        suggestion.textContent = option.text;
+        suggestion.addEventListener('click', () => {
+          input.value = suggestion.textContent;
+          suggestionsContainer.innerHTML = '';
+        });
+        suggestionsContainer.appendChild(suggestion);
+      }
+    });}
+  });
+  document.addEventListener('click', (event) => {
+    if (!event.target.closest('#searchedLocationInput')) {
+      suggestionsContainer.innerHTML = '';
+    }
+  });
+});

static/js/js.js

@@ -5,38 +5,51 @@ function initTooltips(section) {
 }
 
 function checkTermsandConditions(){
-  const checkTerms = document.querySelector('#cgvCheck');
-  const createAccountButton = document.querySelector('#btnCreateAccount');
+  const checkTerms = document.getElementById('cgvCheck'),
+        createAccountButton = document.getElementById('btnCreateAccount');
   createAccountButton.disabled = !checkTerms.checked;
 }
 
-document.addEventListener("DOMContentLoaded", function() {
-  const offmenu = document.getElementById("offSideMenu"),
-        sidemenu = document.getElementById("secondNav");
-
-  const toggleMenus = ({ matches }) => {
-    if(offmenu && sidemenu){
-      offmenu.style.display = matches ? "block" : "none";
-      sidemenu.style.display = matches ? "none" : "block";
-    }
-  };
-
-  const mediaQuery = window.matchMedia("(max-width: 992px)");
-
-  mediaQuery.addEventListener('change', toggleMenus);
-
+const updateMeet = () => {
   const meetOption1 = document.getElementById('userMeetOptionReal'),
   meetOption2 = document.getElementById('userMeetOptionVirtual'),
   meetOption3 = document.getElementById('userMeetOptionHybrid'),
   meetLocation = document.getElementById('userTandemMeetLocation');
+  if (meetLocation) {
+    meetLocation.style.display = (meetOption1?.checked || meetOption3?.checked) ? 'block' : 'none';
+    [meetOption1, meetOption2, meetOption3].forEach(option => {
+      if (option) {
+        option.addEventListener('change', updateMeet);
+      }}
+    );
+  }
+};
 
-  const updateMeet = () => {
-    if (meetLocation) {meetLocation.style.display = (meetOption1?.checked || meetOption3?.checked) ? 'block' : 'none'; }
-  };
+const toggleMenus = ({ matches }) => {
+  const offMenu = document.getElementById("offSideMenu"),
+  sideMenu = document.getElementById("secondNav");
+  if(offMenu && sideMenu){
+    offMenu.style.display = matches ? "block" : "none";
+    sideMenu.style.display = matches ? "none" : "block";
+    mediaQuery.addEventListener('change', toggleMenus);
+  }
+};
 
-  [meetOption1, meetOption2, meetOption3].forEach(option => { if (option) { option.addEventListener('change', updateMeet); }} );
+const radiusUpdate = () => {
+  const rangeInput = document.getElementById('townRadius'),
+  rangeValue = document.getElementById('townRadiusValue');
+  if (rangeInput && rangeValue) {
+    rangeInput.addEventListener('input', () => {
+      rangeValue.textContent = rangeInput.value;
+    });
+  }
+};
 
+document.addEventListener("DOMContentLoaded", function() {
+  mediaQuery = window.matchMedia("(max-width: 992px)");
+
+  radiusUpdate();
   updateMeet();
   initTooltips(document);
-  toggleMenus(mediaQuery); // Initial check
+  toggleMenus(mediaQuery);
 });