ADD: Keyboard selection to GlobalSearch

frontend/src/components/GlobalSearch.vue

@@ -6,7 +6,11 @@
             size="sm" placeholder="Suche" id="search" ref="search"
             v-model="search_input" class="mr-2 search"
             @focus="search_has_focus = true"
-            @blur="search_has_focus = false"
+            @blur="searchLostFocus"
+            @keydown.down="searchKeyboardSelect($event,true)"
+            @keydown.up="searchKeyboardSelect($event,false)"
+            @keydown.enter="searchKeyboardSubmit($event)"
+            @update="keyboard_focus = -1"
         />
         <b-button class="search-clear bg-transparent" size="sm" v-if="search_input !== ''"
                   @click="search_input = ''">
@@ -21,6 +25,7 @@
         <div v-for="(suggestion, index) in suggestions"
              :key="'search-suggestion-' + index"
              class="suggestion p-3"
+             :class="index === keyboard_focus ? 'keyboard-focus':''"
              @click="suggestionClicked($event, suggestion)">
           <font-awesome-icon class="text-secondary mr-2 suggestion-icon"
                              :icon="suggestion.type === 'page' ? 'link': 'question'"/>
@@ -99,7 +104,7 @@ export default {
         'Help',
         'hellooooo?'
       ],
-      suggestion_hover: []
+      keyboard_focus: -1
     }
   },
   computed: {
@@ -145,6 +150,7 @@ export default {
       e.preventDefault()
       if (this.search_input === '') {
         this.show_search = !this.show_search
+        this.keyboard_focus = -1
         if (this.show_search) {
           this.$nextTick(() => {
             this.$refs.search.focus()
@@ -163,7 +169,25 @@ export default {
       if (suggestion.type === 'test') {
         window.console.log('Clicked test suggestion: ' + suggestion.name[0] + suggestion.name[1] + suggestion.name[2])
       }
-      this.searchAction(e)
+      this.show_search = false
+      this.search_input = ''
+    },
+    searchKeyboardSelect(e, down) {
+      e.preventDefault()
+      if (this.suggestions.length > 0) {
+        this.keyboard_focus += down ? 1 : -1
+        this.keyboard_focus = Math.min(Math.max(this.keyboard_focus, -1), this.suggestions.length - 1);
+      }
+    },
+    searchKeyboardSubmit(e) {
+      if (this.keyboard_focus !== -1) {
+        e.preventDefault()
+        this.suggestionClicked(e, this.suggestions[this.keyboard_focus])
+      }
+    },
+    searchLostFocus() {
+      this.search_has_focus = false
+      this.keyboard_focus = -1
     }
   }
 }
@@ -223,6 +247,18 @@ export default {
   cursor: pointer;
 }
 
+.keyboard-focus {
+  background: #b8b8b8 !important;
+}
+
+.keyboard-focus > .suggestion-arrow {
+  display: initial;
+}
+
+.keyboard-focus > .suggestion-icon {
+  display: none;
+}
+
 .suggestion:nth-child(even) {
   background: #f1f1f1;
 }