diff --git a/languages/en.yml b/languages/en.yml
index 390bbd6624..bfbcef4872 100644
--- a/languages/en.yml
+++ b/languages/en.yml
@@ -67,6 +67,9 @@ state:
search:
placeholder: Searching...
+ select: to select
+ navigate: to navigate
+ close: to close
cheers:
um: Um..
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
index 17ce437bec..5f51d4dfcd 100644
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@@ -58,6 +58,9 @@ state:
categories: 分类
search:
placeholder: 搜索...
+ select: 跳转
+ navigate: 上下选择
+ close: 关闭
cheers:
um: 嗯..
ok: 还行
diff --git a/layout/_partials/search/localsearch.swig b/layout/_partials/search/localsearch.swig
index d97e319a90..ce22aec772 100644
--- a/layout/_partials/search/localsearch.swig
+++ b/layout/_partials/search/localsearch.swig
@@ -16,3 +16,22 @@
+
diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
index 2230ff27ce..84f3221e95 100644
--- a/source/css/_common/components/third-party/search.styl
+++ b/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;
}
diff --git a/source/js/local-search.js b/source/js/local-search.js
index 31f945fd7a..0894dc7d70 100644
--- a/source/js/local-search.js
+++ b/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,6 +329,7 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.search-pop-overlay').classList.add('search-active');
input.focus();
if (!isfetched) fetchData();
+ document.addEventListener('keydown', keydownListenner)
});
});
@@ -261,6 +337,7 @@ document.addEventListener('DOMContentLoaded', () => {
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 => {