site: decouple state from event handlers

Try to avoid directly setting state from event handlers and instead
provide utility functions that mutate state in a consistent way.

templates/_search.html.ep

@@ -11,16 +11,16 @@
       x-ref="tags"
       @focus="fetchSuggestions"
       @input.debounce="fetchSuggestions"
-      @keydown.tab="completeSuggestion"
-      @keydown.up.prevent="setCurrentSuggestion($event, -1)"
-      @keydown.down.prevent="setCurrentSuggestion($event, +1)"
+      @keydown.tab.prevent="completeSuggestion"
+      @keydown.up.prevent="previousSuggestion"
+      @keydown.down.prevent="nextSuggestion"
       @keydown.escape="reset">
     <ul id="tags-suggestions"
       x-cloak x-show="suggestions.length > 0">
       <template x-for="suggestion in suggestions">
         <li
-          @click="selectCurrentSuggestion"
-          @mouseenter="setCurrentSuggestion">
+          @click="completeClickedSuggestion"
+          @mouseenter="setPointerSuggestion">
           <span
             x-text="suggestion.display"
             :class="suggestion.kind_class">