javascript - Rails AJAX live search using helper method -
i trying replicate spotify search in updates search results on every key press. works on submit on key press , i'm getting bad request error in console. how can page update on key press? little background info: i'm using rspotify gem in helper method called on search entry.
static_controller.rb:
class staticcontroller < applicationcontroller include applicationhelper def home end def search @search = user_search(params[:query]) render :home end end
application_helper.rb:
module applicationhelper def artist_search(query) artists = rspotify::artist.search(query) return artists end def track_search(query) tracks = rspotify::track.search(query) return tracks end def album_search(query) albums = rspotify::album.search(query) return albums end def user_search(query) results = {"artist" => artist_search(query), "tracks" => track_search(query), "album" => album_search(query)} return results end end
home.html.erb:
<%= form_tag search_path, method: :get, :id => "search" %> <%= text_field_tag :query %> <%= submit_tag 'search' %> <% end %> <% if params.include?(:query) %> <div id="music"><%= render 'music' %></div> <% end %>
_music.html.erb:
<h1>artists</h1> <div class="ui cards"> <% @search["artist"].each |artist| %> <div class="card"> <!-- artist image should go here --> <div class="content"> <a class="header"><%= artist.name %></a> </div> </div> <% end %> </div> <h1>albums</h1> <div class="ui cards"> <% @search["album"].each |album| %> <div class="card"> <a class="image"> <img src="<%= album.images.first["url"] %>"> </a> <div class="content"> <a class="header"><%= album.name %></a> </div> </div> <% end %> </div> <h1>songs</h1> <% @search["tracks"].each |song| %> <div class="ui list"> <div class="item"> <img class="ui avatar image" src="<%= song.album.images.first["url"] %>"> <div class="content"> <a class="header"><%= song.name %></a> <div class="description"><%= song.album.name %></div> </div> </div> </div> <% end %>
index.js.erb:
$("#music").html("<%= escape_javascript(render("music")) %>")
application.js:
$(function() { $("#search input").keyup(function() { $.get($("search").attr("action", $("#search").serialize(), null, "script")); return false; }); });
Comments
Post a Comment