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

Author: knadh

site/base.html

@@ -57,7 +57,7 @@ <h3 class="intro">
               </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>

site/static/main.js

@@ -272,7 +272,7 @@ async function screenshotElement(element) {
   let debounce;
 
   autocomp(elQ, {
-    autoSelect: false,
+    autoSelect: elQ.dataset.autocompAutoselect === "true",
     onQuery: async (val) => {
       const fromLang = localStorage.from_lang;
 

site/static/style.css

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