site: rework search component

Don't reimplement a bunch of reactive stuff that Alpine.js handles by
default.

templates/_search.html.ep

@@ -1,32 +1,32 @@
 % stash("pooru.search" => 1);
+
 <%= form_for "list_media" =>
   name => "search",
   class => "layout-flex-row" =>
   begin %>
-  <div
-    class="layout-flex-item-fullsize position-relative"
-    x-data="tagsSuggestions"
-    @click.outside="reset">
-    <input type="search" name="tags" value="<%= param "tags" %>"
-      placeholder="Search tags..."
-      x-ref="tags"
-      @focus="fetchSuggestions"
-      @input.debounce="fetchSuggestions"
-      @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">
+  <div class="layout-flex-item-fullsize position-relative"
+    x-data="tagsSuggestions('<%= param "tags" %>')"
+    @click.outside="open = false">
+    <input name="tags" value="<%= param "tags" %>" placeholder="Search tags..."
+      x-ref="search"
+      x-model="search"
+      @focus="fetchSuggestionsOnFocus"
+      @input.debounce="fetchSuggestionsOnInput"
+      @keydown.tab="autocompleteItem"
+      @keydown.enter="autocompleteItem"
+      @keydown.up.prevent="previousItem"
+      @keydown.down.prevent="nextItem"
+      @keydown.escape="open = false">
+    <ul class="suggestions"
+      x-ref="suggestions"
+      x-cloak x-show="open && items.length > 0">
+      <template x-for="(item, index) in sortedItems" :key="item.display">
         <li
-          @click="completeClickedSuggestion"
-          @mouseenter="setPointerSuggestion">
-          <span
-            x-text="suggestion.display"
-            :class="suggestion.kind_class">
-            </span>
-          <span class="float-right" x-text="suggestion.count"></span>
+	  :class="index === activeItem ? 'suggestion-hover' : ''"
+	  @click="autocompletePointedItem"
+	  @mouseenter="setHoveredItem">
+          <span x-text="item.display" :class="item.kind_class"></span>
+          <span class="float-right" x-text="item.count"></span>
         </li>
       </template>
     </ul>