Skip to content

Commit 19ecd8a

Browse files
authored
Merge pull request #84 from railsdoc/search-shortcut
Better search experience: shortcut for search and auto-complete the query
2 parents 309ed59 + 8015f57 commit 19ecd8a

File tree

2 files changed

+26
-1
lines changed

2 files changed

+26
-1
lines changed

src/_layouts/default.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<header class="navbar navbar-dark navbar-expand bg-dark flex-md-nowrap p-0 shadow sticky-header">
2929
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="/">{{ site.title }}</a>
3030
<form class="w-100 d-none d-md-flex" action="/search" method="get">
31-
<input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search" name="q">
31+
<input id="search-form" class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search" name="q">
3232
</form>
3333

3434
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex px-1">
@@ -76,5 +76,6 @@
7676
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.3.0/anchor.min.js"></script>
7777
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
7878
<script src="/assets/js/app.js"></script>
79+
<script src="/assets/js/search.js"></script>
7980
</body>
8081
</html>

src/assets/js/search.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
$(() => {
2+
const searchForm = document.getElementById("search-form")
3+
const searchValue = (new URLSearchParams(location.search)).get("q")
4+
5+
if (searchValue) {
6+
searchForm.value = searchValue
7+
}
8+
9+
addEventListener("keydown", (e) => {
10+
switch (e.key) {
11+
case '/':
12+
if (document.activeElement === searchForm) break
13+
14+
e.preventDefault()
15+
searchForm.focus()
16+
break
17+
case 'Escape':
18+
if (document.activeElement === searchForm) {
19+
searchForm.blur()
20+
}
21+
break
22+
}
23+
})
24+
});

0 commit comments

Comments
 (0)