feat: localsearch support keyboard event

languages/en.yml

@@ -67,6 +67,9 @@ state:
 
 search:
   placeholder: Searching...
+  select: to select
+  navigate: to navigate
+  close: to close
 
 cheers:
   um: Um..

languages/zh-CN.yml

@@ -58,6 +58,9 @@ state:
   categories: 分类
 search:
   placeholder: 搜索...
+  select: 跳转
+  navigate: 上下选择
+  close: 关闭
 cheers:
   um: 嗯..
   ok: 还行

layout/_partials/search/localsearch.swig

@@ -16,3 +16,22 @@
     <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
   </div>
 </div>
+<div class="search-footer">
+  <span class="search-commands-key">
+    <svg width="15" height="15"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path></g></svg>
+  </span>
+  <div class="search-tips">
+    {{ __('search.select') }}
+  </div>
+  <span class="search-commands-key"><svg width="15" height="15"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path></g></svg></span>
+  <span class="search-commands-key"><svg width="15" height="15"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path></g></svg></span>
+  <div class="search-tips">
+    {{ __('search.navigate') }}
+  </div>
+  <span class="search-commands-key">
+    <svg width="15" height="15"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg>
+  </span>
+  <div class="search-tips">
+    {{ __('search.close') }}
+  </div>
+</div>

source/css/_common/components/third-party/search.styl

@@ -73,6 +73,30 @@
       display: none;
     }
   }
+
+  .search-footer {
+    background: $gainsboro;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    display: flex;
+    padding: 5px 15px;
+  }
+  .search-commands-key {
+    align-items: center;
+    background: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
+    border-radius: 2px;
+    box-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);
+    display: flex;
+    height: 18px;
+    justify-content: center;
+    margin-right: .4em;
+    margin-top: 6px;
+    padding-bottom: 2px;
+    width: 20px;
+  }
+  .search-tips {
+    margin-right 10px
+  }
 }
 
 if (hexo-config('algolia_search.enable')) {
@@ -180,7 +204,7 @@ if (hexo-config('local_search.enable')) {
 
     #search-result {
       display: flex;
-      height: calc(100% - 55px);
+      height: calc(100% - 99px);
       overflow: auto;
       padding: 5px 25px;
     }

source/js/local-search.js

@@ -232,6 +232,81 @@ document.addEventListener('DOMContentLoaded', () => {
       });
   };
 
+  const stopDefault = (e) => {
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    } else {
+      event.returnValue = false;
+    }
+  }
+
+  const select = (el) => {
+    el.style.backgroundColor = 'rgb(204, 204, 204)'
+    el.classList.add('selected')
+  }
+
+  const unselect = (el) => {
+    el.classList.remove("selected")
+    el.style.backgroundColor = ''
+  }
+
+  const goto = (url) => {
+    location.href = url
+  }
+
+  const keydownListenner = (event) => {
+    const div = document.querySelector('#search-result')
+    div.style.position = 'relative'
+    const list = document.querySelector(".search-result-list")
+    const li = document.querySelectorAll(".search-result-list li")
+    const first = li[0]
+    const last = li.length && li[li.length - 1]
+    let current = document.querySelector(".search-result-list .selected")
+    if (event.code == 'ArrowUp') {
+        if (!current) {
+          select(current = first)
+        } else {
+          unselect(current)
+          if(current.previousSibling) {
+            select(current = current.previousSibling)
+          }else {
+            select(current = last)
+          }
+        }
+        stopDefault(event);
+    } else if (event.code == 'ArrowDown') {
+        if (!current) {
+          select(current = first)
+        } else {
+          unselect(current)
+          if(current.nextSibling) {
+            select(current = current.nextSibling)
+          }else {
+            select(current = first)
+          }
+        }
+        stopDefault(event);
+    } else if (event.code == 'Enter'){
+      current && goto(current.querySelector('a').href)
+    }
+    if(current) {
+      let top = current.offsetHeight + current.offsetTop - current.offsetParent.offsetHeight
+      if (top - div.scrollTop > 0) {
+        div.scrollTo({
+          top: top + 20,
+          behavior: "smooth"
+        })
+      }
+      top = div.scrollTop - current.offsetTop
+      if (top > 0) {
+        div.scrollTo({
+          top: current.offsetTop - 20,
+          behavior: "smooth"
+        })
+      }
+    }
+  }
+
   if (CONFIG.localsearch.preload) {
     fetchData();
   }
@@ -254,13 +329,15 @@ document.addEventListener('DOMContentLoaded', () => {
       document.querySelector('.search-pop-overlay').classList.add('search-active');
       input.focus();
       if (!isfetched) fetchData();
+      document.addEventListener('keydown', keydownListenner)
     });
   });
 
   // Monitor main search box
   const onPopupClose = () => {
     document.body.style.overflow = '';
     document.querySelector('.search-pop-overlay').classList.remove('search-active');
+    document.removeEventListener('keydown', keydownListenner)
   };
 
   document.querySelector('.search-pop-overlay').addEventListener('click', event => {