jesus/mdbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2698 from traviscross/TC/search-ergonomics

Browse source 
Improve ergonomics of search
This commit is contained in:
Eric Huss 2025-05-14 00:43:24 +00:00 • committed by GitHub
commit 63ae0d5c18
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
guide/src/guide/reading.md
View file

@ -42,14 +42,14 @@ Tapping the menu bar will scroll the page to the top.
## Search ## Search
Each book has a built-in search system. Each book has a built-in search system.
Pressing the search icon (<i class="fa fa-search"></i>) in the menu bar, or pressing the `S` key on the keyboard will open an input box for entering search terms. Pressing the search icon (<i class="fa fa-search"></i>) in the menu bar, or pressing the <kbd>/</kbd> or <kbd>S</kbd> key on the keyboard will open an input box for entering search terms.
Typing some terms will show matching chapters and sections in real time. Typing some terms will show matching chapters and sections in real time.
Clicking any of the results will jump to that section. Clicking any of the results will jump to that section.
The up and down arrow keys can be used to navigate the results, and enter will open the highlighted section. The up and down arrow keys can be used to navigate the results, and enter will open the highlighted section.
After loading a search result, the matching search terms will be highlighted in the text. After loading a search result, the matching search terms will be highlighted in the text.
Clicking a highlighted word or pressing the `Esc` key will remove the highlighting. Clicking a highlighted word or pressing the <kbd>Escape</kbd> key will remove the highlighting.
## Code blocks ## Code blocks

17
src/front-end/searcher/searcher.js
View file

@ -35,7 +35,7 @@ window.search = window.search || {};
URL_SEARCH_PARAM = 'search', URL_SEARCH_PARAM = 'search',
URL_MARK_PARAM = 'highlight', URL_MARK_PARAM = 'highlight',
SEARCH_HOTKEY_KEYCODE = 83, SEARCH_HOTKEY_KEYCODES = [83, 191], // `s` or `/`.
ESCAPE_KEYCODE = 27, ESCAPE_KEYCODE = 27,
DOWN_KEYCODE = 40, DOWN_KEYCODE = 40,
UP_KEYCODE = 38, UP_KEYCODE = 38,
@ -362,15 +362,22 @@ window.search = window.search || {};
} }
showSearch(false); showSearch(false);
marker.unmark(); marker.unmark();
} else if (!hasFocus() && e.keyCode === SEARCH_HOTKEY_KEYCODE) { } else if (!hasFocus() && SEARCH_HOTKEY_KEYCODES.includes(e.keyCode)) {
e.preventDefault(); e.preventDefault();
showSearch(true); showSearch(true);
window.scrollTo(0, 0); window.scrollTo(0, 0);
searchbar.select(); searchbar.select();
} else if (hasFocus() && e.keyCode === DOWN_KEYCODE) { } else if (hasFocus() && (e.keyCode === DOWN_KEYCODE
|| e.keyCode === SELECT_KEYCODE)) {
e.preventDefault(); e.preventDefault();
unfocusSearchbar(); const first = searchresults.firstElementChild;
searchresults.firstElementChild.classList.add('focus'); if (first !== null) {
unfocusSearchbar();
first.classList.add('focus');
if (e.keyCode === SELECT_KEYCODE) {
window.location.assign(first.querySelector('a'));
}
}
} else if (!hasFocus() && (e.keyCode === DOWN_KEYCODE } else if (!hasFocus() && (e.keyCode === DOWN_KEYCODE
|| e.keyCode === UP_KEYCODE || e.keyCode === UP_KEYCODE
|| e.keyCode === SELECT_KEYCODE)) { || e.keyCode === SELECT_KEYCODE)) {

2
src/front-end/templates/index.hbs
View file

@ -142,7 +142,7 @@
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li> <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul> </ul>
{{#if search_enabled}} {{#if search_enabled}}
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar"> <button id="search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="searchbar">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
{{/if}} {{/if}}