Fix issues with Search page impelementation

- Makes the autocomplete results highlight with up/down arrows.
- Allows you to unselect autocomplete results by using arrow keys.
- Fixed a bug in previous commits where enter did not take you to autocomplete result.
- Return now goes to the search page if no autocomplete result is selected.
- Search results table now properly wraps. (It would be nice to make it wider but I wasn't able to).
- Fixed a bug in the previous commit where docs were not showing, due to failure to copy a modified js file.
main
Jeremy Salwen 2023-01-28 14:16:49 -05:00 committed by Henrik Böving
parent 1575eeedd2
commit 3a977a94ca
5 changed files with 13 additions and 19 deletions

View File

@ -14,7 +14,6 @@ open scoped DocGen4.Jsx
def search : BaseHtmlM Html := do templateExtends (baseHtml "Search") <| def search : BaseHtmlM Html := do templateExtends (baseHtml "Search") <|
pure <| pure <|
<main> <main>
<a id="top"></a>
<h1> Search Results </h1> <h1> Search Results </h1>
<label for="search_page_query">Query:</label><input id="search_page_query" /> <label for="search_page_query">Query:</label><input id="search_page_query" />
<script> <script>

View File

@ -48,7 +48,7 @@ def baseHtmlGenerator (title : String) (site : Array Html) : BaseHtmlM Html := d
<form action="https://google.com/search" method="get" id="search_form"> <form action="https://google.com/search" method="get" id="search_form">
<input type="hidden" name="sitesearch" value="https://leanprover-community.github.io/mathlib4_docs"/> <input type="hidden" name="sitesearch" value="https://leanprover-community.github.io/mathlib4_docs"/>
<input type="text" name="q" autocomplete="off"/>&#32; <input type="text" name="q" autocomplete="off"/>&#32;
<button onclick="javascript: form.action='/search.html';">Search</button> <button id="search_button" onclick="javascript: form.action='/search.html';">Search</button>
<button>Google site search</button> <button>Google site search</button>
</form> </form>
</header> </header>

View File

@ -183,6 +183,7 @@ function getMatches(declarations, pattern, maxResults = undefined) {
if (err !== undefined) { if (err !== undefined) {
results.push({ results.push({
name, name,
doc,
err, err,
lowerName, lowerName,
lowerDoc, lowerDoc,

View File

@ -29,8 +29,8 @@ function handleSearchCursorUpDown(down) {
if (sel) { if (sel) {
sel.classList.remove("selected"); sel.classList.remove("selected");
const toSelect = down const toSelect = down
? sel.nextSibling || ac_results.firstChild ? sel.nextSibling
: sel.previousSibling || ac_results.lastChild; : sel.previousSibling;
toSelect && toSelect.classList.add("selected"); toSelect && toSelect.classList.add("selected");
} else { } else {
const toSelect = down ? ac_results.firstChild : ac_results.lastChild; const toSelect = down ? ac_results.firstChild : ac_results.lastChild;
@ -42,7 +42,7 @@ function handleSearchCursorUpDown(down) {
* Perform search (when enter is pressed). * Perform search (when enter is pressed).
*/ */
function handleSearchEnter() { function handleSearchEnter() {
const sel = ac_results.querySelector(`.selected`) || ac_results.firstChild; const sel = ac_results.querySelector(`.selected .result_link a`) || document.querySelector(`#search_button`);
sel.click(); sel.click();
} }

View File

@ -198,41 +198,35 @@ header header_filename {
cursor: pointer; cursor: pointer;
} }
#autocomplete_results .selected { #autocomplete_results .selected .result_link a {
background: white; background: white;
border-color: #f0a202; border-color: #f0a202;
} }
#search_results a {
display: block;
}
#search_results {
display: table;
width: 100%;
}
#search_results[state="done"]:empty::before { #search_results[state="done"]:empty::before {
content: '(no results)'; content: '(no results)';
font-style: italic; font-style: italic;
} }
#search_results { #search_results .result_link, #search_results .result_doc {
width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.8);
display: table;
table-layout: auto;
} }
.search_result { .search_result {
width: 100%;
display: table-row; display: table-row;
} }
.result_link, .result_doc { .result_link, .result_doc {
display: table-cell; display: table-cell;
overflow: hidden; overflow: hidden;
word-break: break-word;
} }
#search_results .result_link, #search_results .result_doc {
display: table-cell;
overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}
main, nav { main, nav {
margin-top: calc(var(--header-height) + 1em); margin-top: calc(var(--header-height) + 1em);
} }