blob: d42337f0e952ad054165254a2c492b1ec8c0e7a7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
/**
* search.js
*
* Provides simple client-side filtering of the handbook's articles.
*
* How it works:
* 1. Pressing the "/" key anywhere on the page focuses the search input
* (id "search-input"), unless focus is already needed elsewhere.
* 2. As the user types, every `<article>` in `<main>` is shown or hidden
* based on whether its text content includes the (case-insensitive)
* query string.
*/
document.addEventListener("keypress", function (event) {
if (event.key === "/") {
const searchInput = document.getElementById("search-input");
if (searchInput) {
searchInput.focus();
event.preventDefault();
}
}
});
document
.querySelector("#search-input")
.addEventListener("input", function (event) {
const query = event.target.value.toLowerCase();
const articles = document.querySelectorAll("main article");
articles.forEach((article) => {
const text = article.textContent.toLowerCase();
if (text.includes(query)) {
article.style.display = "";
} else {
article.style.display = "none";
}
});
});
|
