From 30a00425aeda35f3ecf9cccff7193d6152b532d9 Mon Sep 17 00:00:00 2001 From: Daoud Clarke Date: Mon, 20 Dec 2021 23:02:12 +0000 Subject: [PATCH] Follow selected item on enter --- static/index.html | 2 +- static/index.js | 40 ++++++++++++++++++++++++++++++++-------- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/static/index.html b/static/index.html index 8f1dd41..caa1c1b 100644 --- a/static/index.html +++ b/static/index.html @@ -10,7 +10,7 @@
-
+
diff --git a/static/index.js b/static/index.js index 915b630..641d2ff 100644 --- a/static/index.js +++ b/static/index.js @@ -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'); + } }