|
@@ -1,6 +1,7 @@
|
|
|
|
|
|
ts = {
|
|
ts = {
|
|
- selected: null
|
|
|
|
|
|
+ selected: null,
|
|
|
|
+ numItems: 0
|
|
};
|
|
};
|
|
|
|
|
|
window.onload = (event) => {
|
|
window.onload = (event) => {
|
|
@@ -24,25 +25,36 @@ window.onload = (event) => {
|
|
addResult(element.title, element.extract, element.url, i);
|
|
addResult(element.title, element.extract, element.url, i);
|
|
};
|
|
};
|
|
ts.selected = null;
|
|
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') {
|
|
if (e.key == 'ArrowDown') {
|
|
selectNextItem();
|
|
selectNextItem();
|
|
} else if (e.key == 'ArrowUp') {
|
|
} else if (e.key == 'ArrowUp') {
|
|
selectPreviousItem();
|
|
selectPreviousItem();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
+
|
|
|
|
+ // Handle pressing enter
|
|
|
|
+ const form = document.getElementById('search-form');
|
|
|
|
+
|
|
|
|
+ form.addEventListener( "submit", event => {
|
|
|
|
+ event.preventDefault();
|
|
|
|
+ clickSelected();
|
|
|
|
+ });
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
function selectNextItem() {
|
|
function selectNextItem() {
|
|
if (ts.selected === null) {
|
|
if (ts.selected === null) {
|
|
ts.selected = 0;
|
|
ts.selected = 0;
|
|
- } else {
|
|
|
|
|
|
+ } else if (ts.selected < ts.numItems -1) {
|
|
ts.selected++;
|
|
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() {
|
|
function selectPreviousItem() {
|
|
if (ts.selected === null) {
|
|
if (ts.selected === null) {
|
|
- ts.selected = 0;
|
|
|
|
- } else {
|
|
|
|
|
|
+ return;
|
|
|
|
+ } else if (ts.selected > 0) {
|
|
ts.selected--;
|
|
ts.selected--;
|
|
|
|
+ } else if (ts.selected == 0) {
|
|
|
|
+ ts.selected = null;
|
|
}
|
|
}
|
|
|
|
|
|
updateSelected();
|
|
updateSelected();
|
|
@@ -67,8 +89,10 @@ function updateSelected() {
|
|
child.classList.remove('selected');
|
|
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');
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|