site: implement search functionality

templates/_search.html.ep

@@ -0,0 +1,34 @@
+% 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">
+    <input type="search" name="tags" value="<%= param "tags" %>"
+      placeholder="Search tags..."
+      x-ref="tags"
+      @focus="fetchSuggestions"
+      @input.debounce="fetchSuggestions"
+      @keydown.tab="completeSuggestion"
+      @keydown.up.prevent="setCurrentSuggestion($event, -1)"
+      @keydown.down.prevent="setCurrentSuggestion($event, +1)"
+      @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">
+          <span
+            x-text="suggestion.display"
+            :class="suggestion.kind_class">
+            </span>
+          <span class="float-right" x-text="suggestion.count"></span>
+        </li>
+      </template>
+    </ul>
+  </div>
+  <%= submit_button "Search" %>
+<% end %>