Tweak autocomp style and make auto-select behaviour configurable from the template.

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="true" />
                 <button type="submit" aria-label="Search"><img src="/static/search.svg?v={{ .AssetVer }}" alt="{{- .L.T "global.btnSearch" -}}" /></button>
               </div>
             </div>

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;
 

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: 10px;
+  padding: 5px 10px;
   cursor: pointer;
+  border-bottom: 1px solid #eee;
 }
 
 .autocomp-item:hover,