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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -