diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 461c0ae9..d8d1a9d9 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -15,7 +15,7 @@
                 type="text"
                 placeholder="Search"
                 v-model="searchText"
-                @keydown="onKeyDown"
+                @keyup="onKeyUp"
                 @focus="onInputFocus"
                 @blur="onInputBlur"
             />
@@ -40,7 +40,7 @@
             type="text"
             placeholder="Search"
             v-model="searchText"
-            @keydown="onKeyDown"
+            @keyup="onKeyUp"
             @focus="onInputFocus"
             @blur="onInputBlur"
         />
@@ -49,6 +49,7 @@
         v-show="searchText && suggestionsVisible"
         :searchText="searchText"
         @searchchange="onSearchTextChange"
+        ref="searchSuggestions"
     />
 </template>
 
@@ -66,7 +67,7 @@ export default {
         };
     },
     methods: {
-        onKeyDown(e) {
+        onKeyUp(e) {
             if (e.key === "Enter") {
                 this.$router.push({
                     name: "SearchResults",
@@ -76,6 +77,7 @@ export default {
             } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
                 e.preventDefault();
             }
+            this.$refs.searchSuggestions.onKeyUp(e);
         },
         onInputFocus() {
             this.suggestionsVisible = true;
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index ddfa2c73..b4ebf9f5 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -5,6 +5,8 @@
                 v-for="(suggestion, i) in searchSuggestions"
                 :key="i"
                 :class="{ selected: selected === i }"
+                @mouseover="onMouseOver(i)"
+                @mousedown.stop="onClick(i)"
                 class="uk-margin-remove suggestion"
             >
                 {{ suggestion }}
@@ -30,16 +32,16 @@ export default {
         onKeyUp(e) {
             if (e.key === "ArrowUp") {
                 if (this.selected <= 0) {
-                    this.selected = this.searchSuggestions.length - 1;
+                    this.setSelected(this.searchSuggestions.length - 1);
                 } else {
-                    this.selected -= 1;
+                    this.setSelected(this.selected - 1);
                 }
                 e.preventDefault();
             } else if (e.key === "ArrowDown") {
                 if (this.selected >= this.searchSuggestions.length - 1) {
-                    this.selected = 0;
+                    this.setSelected(0);
                 } else {
-                    this.selected += 1;
+                    this.setSelected(this.selected + 1);
                 }
                 e.preventDefault();
             } else {
@@ -51,20 +53,24 @@ export default {
                 Constants.BASE_URL + "/suggestions?query=" + encodeURI(this.searchText)
             );
             this.searchSuggestions.unshift(this.searchText);
-        }
-    },
-    watch: {
-        selected(newValue, oldValue) {
-            if (newValue !== oldValue && this.searchSuggestions[this.selected]) {
-                this.$emit("searchchange", this.searchSuggestions[this.selected]);
+            this.setSelected(0);
+        },
+        onMouseOver(i) {
+            if (i !== this.selected) {
+                this.selected = i;
             }
+        },
+        onClick(i) {
+            this.setSelected(i);
+            this.$router.push({
+                name: "SearchResults",
+                query: { search_query: this.searchText }
+            });
+        },
+        setSelected(val) {
+            this.selected = val;
+            this.$emit("searchchange", this.searchSuggestions[this.selected]);
         }
-    },
-    mounted() {
-        window.addEventListener("keyup", this.onKeyUp);
-    },
-    beforeUnmount() {
-        window.removeEventListener("keyup", this.onKeyUp);
     }
 };
 </script>