.

country/index.html

@@ -86,13 +86,13 @@ window.addEventListener("DOMContentLoaded", async () => {
 		}
       }
     }*/
-if (isoFromURL) {
-  const matched = sitesData.find(c => c.iso.toUpperCase() === isoFromURL.toUpperCase());
-  if (matched) {
-    document.getElementById("id_siteInput").value = matched.names[0];
-    await handleSiteSelection(matched, "country");
-  }
-}
+	if (isoFromURL) {
+	  const matched = sitesData.find(c => c.iso.toUpperCase() === isoFromURL.toUpperCase());
+	  if (matched) {
+		document.getElementById("id_siteInput").value = matched.names[0];
+		await handleSiteSelection(matched, "country");
+	  }
+	}
 	
 	
     // Add search and arrow/enter listeners now that data are ready
@@ -154,7 +154,7 @@ async function handleSiteSelection(site,arg_name) {
     loadSiteImages(site.iso, "country/img");
   }}
 
-function searchSites() {
+/*function searchSites() {
   const input = document.getElementById("id_siteInput");
   const id_siteList = document.getElementById("id_siteList");
   id_siteList.innerHTML = "";
@@ -181,6 +181,51 @@ function searchSites() {
 
   id_siteList.appendChild(list);
 
+  // Highlight the first item
+  updateHighlight();
+}*/
+
+function searchSites() {
+  const input = document.getElementById("id_siteInput");
+  const id_siteList = document.getElementById("id_siteList");
+  id_siteList.innerHTML = "";
+  highlightedIndex = 0;
+
+  if (!input.value) return;
+
+  const lowerInput = input.value.toLowerCase();
+
+  // Filter matching sites
+  let matchingSites = sitesData.filter(site =>
+    site.names.some(name => name.toLowerCase().includes(lowerInput))
+  );
+
+  if (!matchingSites.length) return;
+
+  // Sort matches: names that start with input first, then alphabetically
+  matchingSites.sort((a, b) => {
+    const aStarts = a.names.some(name => name.toLowerCase().startsWith(lowerInput));
+    const bStarts = b.names.some(name => name.toLowerCase().startsWith(lowerInput));
+
+    if (aStarts && !bStarts) return -1; // a comes first
+    if (!aStarts && bStarts) return 1;  // b comes first
+
+    // If both start (or both don't), sort alphabetically by primary name
+    return a.names[0].localeCompare(b.names[0]);
+  });
+
+  const list = document.createElement("ul");
+
+  matchingSites.forEach((site, index) => {
+    const li = document.createElement("li");
+    li.textContent = site.names[0];
+    li.dataset.index = index;
+    li.addEventListener("click", () => handleSiteSelection(site,"country").catch(console.error));
+    list.appendChild(li);
+  });
+
+  id_siteList.appendChild(list);
+
   // Highlight the first item
   updateHighlight();
 }
@@ -188,6 +233,7 @@ function searchSites() {
 
 
 
+
 </script>
 
 </body>

js/countryselector.js

@@ -83,7 +83,7 @@ function displayCountryImages(isoCode) {
 
 // Autocompletion code -----------------------------------------
 
-function scoreMatch(variant, input) {
+/*function scoreMatch(variant, input) {
   const lowerVariant = variant.toLowerCase();
   const lowerInput = input.toLowerCase();
   
@@ -93,6 +93,21 @@ function scoreMatch(variant, input) {
     return 50 - lowerVariant.indexOf(lowerInput); // Prioritize earlier matches
   }
   return 0; // No match
+}*/
+function scoreMatch(variant, input) {
+  const lowerVariant = variant.toLowerCase();
+  const lowerInput = input.toLowerCase();
+  
+  if (lowerVariant === lowerInput) {
+    return 200; // Highest score for an exact match
+  }
+  
+  if (lowerVariant.startsWith(lowerInput)) {
+    return 150 - lowerVariant.length; // Strong priority for matches that start with the input
+  } else if (lowerVariant.includes(lowerInput)) {
+    return 50 - lowerVariant.indexOf(lowerInput); // Lower priority for partial matches
+  }
+  return 0; // No match
 }
 
 // Reduce the number of times the search function is called, especially for fast typers