solution: day 2 - task 4

app/assets/stylesheets/nav.css

@@ -28,6 +28,18 @@
   @apply pl-10 p-1 w-full rounded border-none bg-opacity-0 bg-white transition-colors focus:bg-opacity-90 focus:border focus:border-gray-300 focus:outline-none outline-offset-0 !important;
 }
 
+.nav--search--input:has(+ .nav--search--results) {
+  @apply bg-opacity-90 border border-gray-300;
+}
+
+.nav--search--results {
+  @apply absolute w-[300px] top-4 bg-white mt-8 z-40 shadow-md pt-2;
+}
+
+.nav--search--result {
+  @apply p-2;
+}
+
 .nav--logo {
   @apply flex h-full items-center self-start;
   background: url("/assets/logo.png") no-repeat;

app/controllers/search_controller.rb

@@ -3,11 +3,17 @@ def index
     q = params[:q]
 
     if q.blank? || q.length < 3
-      return redirect_back(fallback_location: root_path, alert: "Please, enter at least 3 characters")
+      unless turbo_frame_request?
+        return redirect_back(fallback_location: root_path, alert: "Please, enter at least 3 characters")
+      end
+    else
+      @artists = Artist.search(q).limit(10)
+      @albums = Album.search(q).limit(10)
+      @tracks = Track.search(q).limit(10)
     end
 
-    @artists = Artist.search(q).limit(10)
-    @albums = Album.search(q).limit(10)
-    @tracks = Track.search(q).limit(10)
+    if turbo_frame_request?
+      render partial: "live_results", locals: {artists: @artists, albums: @albums, tracks: @tracks}
+    end
   end
 end

app/javascript/controllers/search_controller.js

@@ -0,0 +1,35 @@
+import { ApplicationController, useDebounce, useClickOutside } from 'stimulus-use'
+
+export default class extends ApplicationController {
+    static targets = ["form", "term", "results"]
+    static debounces = ["fetch"]
+
+    connect() {
+        useDebounce(this, {wait: 100});
+        useClickOutside(this);
+    }
+
+    disconnect() {
+        this.away();
+    }
+
+    fetch() {
+        this.resultsTarget.src = this.formTarget.action + "?q=" + encodeURIComponent(this.termTarget.value);
+    }
+
+    away() {
+        setTimeout(() => {
+            this.termTarget.value = "";
+            this.resultsTarget.src = "";
+            this.resultsTarget.innerHTML = '';
+        }, 50);
+    }
+
+    clickOutside() {
+        this.resultsTarget.hidden = true;
+    }
+
+    focus() {
+        this.resultsTarget.hidden = false;
+    }
+}

app/views/search/_live_results.html.erb

@@ -0,0 +1,26 @@
+<%# locals: (artists: , albums:, tracks:) -%>
+<%= turbo_frame_tag "search-results", data: {search_target: "results"}, target: "_top" do %>
+  <% if artists.present? || albums.present? || tracks.present? %>
+    <ul class="nav--search--results">
+      <% (artists || []).each do |artist| %>
+        <li class="nav--search--result">
+          <%= link_to artist.name, artist, class: "hover:text-secondary", data: {action: "click->search#away"} %>
+        </li>
+      <% end %>
+
+      <% (albums || []).each do |album| %>
+        <li class="nav--search--result">
+          <%= link_to album.title, album, class: "hover:text-secondary", data: {action: "click->search#away"} %>
+          <span class="ml-2 text-primary text-xsmall"><%= album.artist.name %></span>
+        </li>
+      <% end %>
+
+      <% (tracks || []).each do |track| %>
+        <li class="nav--search--result">
+          <%= link_to track.title, play_track_path(track), class: "hover:text-primary", data: {turbo_frame: "player", action: "click->search#away"} %>
+          <span class="ml-2 text-secondary text-xsmall"><%= track.album.artist.name %></span>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

app/views/shared/_nav.html.erb

@@ -14,18 +14,22 @@
         <% end %>
       <% end %>
     <%- end -%>
-    <%= form_with(url: search_path, method: :get, class: "nav--search") do |f| %>
-      <div class="nav--search--icon">
-        <%= render "icons/search" %>
-      </div>
-      <%= f.search_field :q, value: params[:q], class: "nav--search--input" %>
-    <% end %>
+    <div data-controller="search">
+      <%= form_with(url: search_path, method: :get, class: "nav--search", data: {search_target: "form"}) do |f| %>
+        <div class="nav--search--icon">
+          <%= render "icons/search" %>
+        </div>
+        <%= f.search_field :q, value: params[:q], class: "nav--search--input",
+                           data: {action: "keyup->search#fetch focus->search#focus", search_target: "term"} %>
+      <% end %>
+      <%= turbo_frame_tag "search-results", data: {search_target: "results"}, target: "_top" %>
+    </div>
   </div>
   <div class="nav--right">
     <%- if current_user -%>
       <span class="nav--username"><%= User::PREFIX + current_user.username %></span>
       <%= button_to "Sign out", sign_out_path, method: :delete, class: "nav--btn--outlined ml-2" %>
-    <%- else- %>
+    <%- else -%>
       <%= link_to "Sign up", sign_up_path, class: "nav--btn--outlined" %>
       <%= link_to "Log in", sign_in_path, class: "nav--btn ml-2" %>
     <%- end -%>

config/importmap.rb

@@ -10,3 +10,4 @@
 pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.2.1/dist/stimulus.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "stimulus-use", to: "https://ga.jspm.io/npm:stimulus-use@0.52.0/dist/index.js"