Fix autocomp behaviour to ignore non-Kannada inputs and always select the first suggestion.

base.html

@@ -58,7 +58,7 @@
               </select>
               <div class="input-group">
                 <input autofocus autocomplete="off" required placeholder="" aria-label="Search word"
-                  type="text" id="q" name="q" value="{{ if .Data.Query }}{{ .Data.Query.Query }}{{ end }}" />
+                  type="text" id="q" name="q" value="{{ if .Data.Query }}{{ .Data.Query.Query }}{{ end }}" data-autocomp-autoselect="false" />
                 <button type="submit" aria-label="Search"><img src="/static/search.svg?v={{ .AssetVer }}" alt="{{- .L.T "global.btnSearch" -}}" /></button>
               </div>
             </div>

static/autocomp.js

@@ -122,7 +122,7 @@ function autocomp(el, options = {}) {
 			return;
 		}
 
-		val = opt.onSelect(items[idx]);
+		val = opt.onSelect(items[idx], items);
 		el.value = val || items[idx];
 	}
 

static/main.js

@@ -273,7 +273,7 @@ async function screenshotElement(element) {
   let debounce;
 
   autocomp(elQ, {
-    autoSelect: false,
+    autoSelect: elQ.dataset.autocompAutoselect === "true",
     onQuery: async (val) => {
       const langCode = localStorage.from_lang;
 
@@ -298,8 +298,12 @@ async function screenshotElement(element) {
       });
     },
 
-    onSelect: (val) => {
+    onSelect: (val, items) => {
-      // autocomp search isn't complete. Use the user's input instead of autocomp selection.
+      // If the val is English, then pick the first item from items and use that.
+      if (/^[A-Za-z0-9\-,'" ]+$/.test(val) && items.length > 0) {
+        val = items[0];
+      }
+
       if (val) {
         elQ.value = val;
       }

static/style.css

@@ -642,7 +642,7 @@ button:hover,
 
 /* Autocomplete */
 .autocomp {
-  background: #f8f8f8;
+  background: #fff;
   border-radius: 0 0 5px 5px;
   border: 1px solid #ccc;
   border-top: 0;
@@ -652,9 +652,9 @@ button:hover,
 }
 
 .autocomp-item {
-  padding-bottom: 5px;
+  padding: 5px 10px;
-  padding: 10px;
   cursor: pointer;
+  border-bottom: 1px solid #eee;
 }
 
 .autocomp-item:hover,