keyboard shortcuts for search

src/components/SearchBar.vue

@@ -5,7 +5,10 @@ import { formatDate } from '@/utils/helpers'
 
 const active = ref(false)
 watch(active, () => {
-  if (!active.value) query.value = ''
+  if (!active.value) {
+    query.value = ''
+    activeResult.value = undefined
+  }
 })
 
 const query = ref('')
@@ -19,6 +22,29 @@ const goToNote = (note: Note) => {
   if (queryElem.value) queryElem.value.blur()
 }
 const queryElem = ref<HTMLInputElement | null>(null)
+
+const activeResult = ref<Note>()
+
+const handleKeydown = (event: KeyboardEvent) => {
+  const code = event.code
+  if (['ArrowUp', 'ArrowDown', 'Tab'].includes(code)) {
+    let index = results.value.findIndex(
+      (note) => note.id === activeResult.value?.id
+    )
+    if (['ArrowDown', 'Tab'].includes(code)) {
+      index++
+    } else if (['ArrowUp'].includes(code)) {
+      index--
+    }
+    if (index + 1 > results.value.length) index = index - results.value.length
+    if (index < 0) index = results.value.length - 1
+    activeResult.value = results.value[index]
+  } else if (code === 'Enter' && activeResult.value) {
+    goToNote(activeResult.value)
+  } else if (code === 'Escape' && queryElem.value) {
+    queryElem.value.blur()
+  }
+}
 </script>
 <template>
   <div id="search-container" class="relative h-full flex-1">
@@ -31,6 +57,7 @@ const queryElem = ref<HTMLInputElement | null>(null)
       @blur="active = false"
       v-model="query"
       ref="queryElem"
+      @keydown="handleKeydown"
     />
     <div
       class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
@@ -41,23 +68,26 @@ const queryElem = ref<HTMLInputElement | null>(null)
         class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow"
       >
         <li
-          v-for="note in results"
+          v-for="result in results"
           v-if="results.length > 0"
           class="flex flex-row"
         >
           <a
             class="flex-1 items-center px-2 py-1"
-            @click.stop.prevent="() => goToNote(note)"
+            @click.stop.prevent="() => goToNote(result)"
             @mousedown.prevent
-            :class="{ disabled: activeNote?.id === note.id }"
+            :class="{
+              disabled: activeNote?.id === result.id,
+              active: activeResult?.id === result.id,
+            }"
           >
             <span
               class="badge-ghost badge badge-sm mr-0.5"
-              v-if="activeNote?.id === note.id"
+              v-if="activeNote?.id === result.id"
               >current</span
             >
-            <span class="flex-1">{{ note.title }}</span>
-            <span>{{ formatDate(note.modified) }}</span></a
+            <span class="flex-1">{{ result.title }} </span>
+            <span>{{ formatDate(result.modified) }}</span></a
           >
         </li>
         <li v-else><a>No notes found</a></li>