improve search

- fix menu element becoming inactive
      change class active -> focus
    - set input type seach #198
    - add a reset func
    - add script to clear searchbox
      when clicked on X sign
This commit is contained in:
Aditya Telange 2021-02-07 21:34:34 +05:30
parent 7170eda172
commit e03348c041
No known key found for this signature in database
GPG Key ID: 82E844EF3DA99E77
3 changed files with 27 additions and 18 deletions

View File

@ -39,7 +39,7 @@
outline: none;
}
#searchResults .active {
#searchResults .focus {
transform: scale(.98);
border: 2px solid var(--tertiary)
}

View File

@ -42,7 +42,13 @@ function itemGen(name, link) {
}
function activeToggle() {
document.activeElement.parentElement.classList.toggle("active")
document.activeElement.parentElement.classList.toggle("focus")
}
function reset() {
resultsAvailable = false;
resList.innerHTML = sInput.value = ''; // clear inputbox and searchResults
sInput.focus(); // shift focus to input box
}
// execute search as each character is typed
@ -59,16 +65,21 @@ sInput.onkeyup = function (e) {
resultSet = resultSet + itemGen(results[item].item.title, results[item].item.permalink)
}
document.getElementById("searchResults").innerHTML = resultSet;
resList.innerHTML = resultSet;
resultsAvailable = true;
first = resList.firstChild;
last = resList.lastChild;
} else {
resultsAvailable = false;
document.getElementById("searchResults").innerHTML = '';
resList.innerHTML = '';
}
}
sInput.addEventListener('search', function (e) {
// clicked on x
if (!this.value) reset()
})
// kb bindings
document.onkeydown = function (e) {
let key = e.key;
@ -76,9 +87,9 @@ document.onkeydown = function (e) {
let inbox = document.getElementById("searchbox").contains(ae)
if (ae === sInput) {
var elements = document.getElementsByClassName('active');
var elements = document.getElementsByClassName('focus');
while (elements.length > 0) {
elements[0].classList.remove('active');
elements[0].classList.remove('focus');
}
}
@ -86,16 +97,16 @@ document.onkeydown = function (e) {
e.preventDefault();
if (ae == sInput) {
// if the currently focused element is the search input, focus the <a> of first <li>
activeToggle(); // rm active class
activeToggle(); // rm focus class
resList.firstChild.lastChild.focus();
activeToggle(); // add active class
activeToggle(); // add focus class
} else if (ae.parentElement == last) {
// if the currently focused element's parent is last, do nothing
} else {
// otherwise select the next search result
activeToggle(); // rm active class
activeToggle(); // rm focus class
ae.parentElement.nextSibling.lastChild.focus();
activeToggle(); // add active class
activeToggle(); // add focus class
}
} else if (key === "ArrowUp" && resultsAvailable && inbox) {
e.preventDefault();
@ -103,19 +114,17 @@ document.onkeydown = function (e) {
// if the currently focused element is input box, do nothing
} else if (ae.parentElement == first) {
// if the currently focused element is first item, go to input box
activeToggle(); // rm active class
activeToggle(); // rm focus class
sInput.focus();
} else {
// otherwise select the previous search result
activeToggle(); // rm active class
activeToggle(); // rm focus class
ae.parentElement.previousSibling.lastChild.focus();
activeToggle(); // add active class
activeToggle(); // add focus class
}
} else if (key === "ArrowRight" && resultsAvailable && inbox) {
ae.click(); // click on active link
} else if (key === "Escape") {
resultsAvailable = false;
resList.innerHTML = sInput.value = ''; // clear inputbox and searchResults
sInput.focus(); // shift focus to input box
reset()
}
}

View File

@ -21,7 +21,7 @@
</header>
<div id="searchbox">
<input id="searchInput" autofocus placeholder="{{.Title}} ↵" aria-label="search">
<input id="searchInput" autofocus placeholder="{{.Title}} ↵" aria-label="search" type="search">
<ul id="searchResults" aria-label="search results"></ul>
</div>