Follow selected item on enter

This commit is contained in:
Daoud Clarke 2021-12-20 23:02:12 +00:00
parent 5e7c5a905e
commit 30a00425ae
2 changed files with 33 additions and 9 deletions

View file

@ -10,7 +10,7 @@
</head>
<body>
<div id="container">
<form autocomplete="off">
<form autocomplete="off" id="search-form">
<input type="search" id="search" name="s" value="" autofocus/>
</form>

View file

@ -1,6 +1,7 @@
ts = {
selected: null
selected: null,
numItems: 0
};
window.onload = (event) => {
@ -24,25 +25,36 @@ window.onload = (event) => {
addResult(element.title, element.extract, element.url, i);
};
ts.selected = null;
ts.numItems = content.length;
});
});
}
});
document.addEventListener('keyup', (e) => {
// Handle moving the selected item up and down
document.addEventListener('keydown', (e) => {
console.log("Key press", e);
if (e.key == 'ArrowDown') {
selectNextItem();
} else if (e.key == 'ArrowUp') {
selectPreviousItem();
}
});
// Handle pressing enter
const form = document.getElementById('search-form');
form.addEventListener( "submit", event => {
event.preventDefault();
clickSelected();
});
};
function selectNextItem() {
if (ts.selected === null) {
ts.selected = 0;
} else {
} else if (ts.selected < ts.numItems -1) {
ts.selected++;
}
@ -50,11 +62,21 @@ function selectNextItem() {
}
function clickSelected() {
if (ts.selected !== null) {
const selectedResult = document.getElementById(ts.selected.toString());
selectedResult.click();
}
}
function selectPreviousItem() {
if (ts.selected === null) {
ts.selected = 0;
} else {
return;
} else if (ts.selected > 0) {
ts.selected--;
} else if (ts.selected == 0) {
ts.selected = null;
}
updateSelected();
@ -67,8 +89,10 @@ function updateSelected() {
child.classList.remove('selected');
});
const selectedResult = document.getElementById(ts.selected.toString());
selectedResult.classList.add('selected');
if (ts.selected !== null) {
const selectedResult = document.getElementById(ts.selected.toString());
selectedResult.classList.add('selected');
}
}