如何根据 Rails 中的表单输入动态更新搜索结果？

Question

我希望网站访问者能够在可以通过下拉表单输入的范围内查看附近的节目。我有一个使用 Geocoder gem 显示附近节目的视图：

<h3> Shows near <%= request.location.city %> </h3>
<%= form_for @nearby_shows.first do |f| %>
<p> Radius (in miles): <%= f.select(:radii, [10,20,30,40,50], {},
   :style => "width:50px", :selected => f.object.radii, :onchange =>
   "location.href = '#{shows_path}'") %> </p>
<% end %>
<ul class="users">
  <% @nearby_shows.each do |nearby_show| %>
    <li>
      <%= link_to nearby_show.show_name, nearby_show %>
    </li>
  <% end %>
</ul>

目前选择不会影响任何内容，并且当页面刷新时不会在表单中记住选择。

模型，show.rb 包含：

attr_accessor :radii

节目控制器包含：

def index
    @shows = Show.all
    @radii = 50
    @nearby_venues = Venue.near("Boulder, CO",@radii,:select =>
    "id").to_a
    @nearby_shows = Show.where(show_venue: @nearby_venues)
end

在生产中，我将使用 request.location.city，但在开发中，我只是使用“Boulder, CO”作为示例。

如何使用输入选择表单设置@radii？我担心 form_for 不允许我更改实体列表的变量@nearby_shows。

Answer 1

如果您想要一个快速的 AJAX 解决方案，我会这样做

首先，在您的列表中添加一个 ID，以便于操作

<ul id="my_id" class="users"></ul>

我真的不明白你为什么需要<%= form_for @nearby_shows.first %> ？如果我理解得很好，您只想显示一个选择，并根据用户选择的内容更新附近的节目列表？

routes.rb

resource :shows do
  get 'update_nearby', on: :collection, constraints: { format: 'js' }
end
# GET /shows/update_nearby, meant to be used only with AJAX

your_view.html.erb

<%= form_tag update_nearby_shows_path, remote: :true do |f| %>
<p> Radius (in miles): <%= select_tag(:radii, [10,20,30,40,50], {},
   :style => "width:50px", :selected => @radii, :onchange =>
   "location.href = '#{shows_path}'") %> </p>
<% end %>

<!-- On Submit, it will request a JS response 
     You can add some JS to submit the form everytime the select changes -->

添加一些 JS 特定的响应

your_controller.rb

def update_nearby
  find_nearby_shows
end

private
def find_nearby_shows
  @radii = params[:radii] ? params[:radii] : 50
  @nearby_venues = Venue.near("Boulder, CO",@radii,:select =>
    "id").to_a
  @nearby_shows = Show.where(show_venue: @nearby_venues)
end

update_nearby.js.erb

<% if @nearby_shows %>
  // Empty the list
  var id = $("#my_id").empty()
  <% @nearby_shows.each do %>
    // Add one <li> per show
    $("<li>", { 'html': "<%= escape_javascript(link_to(nearby_show.show_name, nearby_show)) %>"}).appendTo(id)
  <% end %>
<% end %>

奖励：你说你想保存半径？您实际上可以尝试将其添加到用户会话中

def index
  ...
  @radii = session[:saved_radii] ? session[:saved_radii] : DEFAULT_RADIUS
  ...
end

def update_nearby
   find_nearby_shows
   session[:saved_radii] = @radii
end

但如果你真的想为用户保存它，你应该在你的用户模型中有一个preferred_radii 字段