javascript - 尝试在侧边栏中执行实时 AJAX 搜索

标签 javascript jquery ajax search ruby-on-rails-4

我对 AJAX 搜索很陌生,对 Rails 也很陌生。我正在尝试在应用程序的侧边栏中创建一个搜索表单,以便将其包含在每个页面上。我需要仅在输入搜索时搜索结果才显示在当前页面上。

我有一个“电影”表,并且刚刚开始搜索“标题”列。这是我到目前为止所拥有的。现在,搜索不仅返回 div 中的搜索结果,也不会返回当前页面上的任何结果。使用 Rails 4.0.0。

_sidebar.html.erb

    <aside id="sidebar">
<nav>
 <%= form_tag movies_path, :method => 'get', :id => "movies_search" do %>

<center>
<p>
 <%= text_field_tag :search, params[:search] %>
 <%= submit_tag "Search", :name => nil %>
</p>
</center>

 <div id="cresults_div" style="float:right; width:300px;"><%= render 'cresults' %></div>
<% end %>
 <ul style="margin-top: 300px;">
  <li class="all-movies">
    <%= link_to 'All Movies', movies_path, class: 'button' %>
  </li>
  <li class="create-movie">
    <%= link_to 'Add New Movie', new_movie_path, class: 'button' %>
  </li>
 </ul>

</nav>
</aside>

movies_controller.rb

  def index
 @movies = Movie.released
 @movies = Movie.search(params[:search])
 end
end

电影.rb

def self.search(search)
  if search
    where('title LIKE ?', "%#{search}%")
  else
    scoped
  end
end

_cresults.html.erb

<h2>Search Results: </h2>

<table>
 <tr>
  <th>Title:</th>
  <th style="width:85px;">Released: </th>
  <th>Rating: </th>
</tr>

  <% @movies.each do |movie| %>
<tr>
 <td><%= link_to movie.title, movie %></td>
 <td><center><%= movie.released_on.year %></center></td>
 <td><center><%= movie.rating %></center></td>
</tr>

 <% end %>
</table>

movies.js

$(function() {
 $('#movies_search').submit( ->
 $.get(this.action, $(this).serialize(), null, 'script')
  false
 });

$(function() {
 $('#movies_search input').keyup( ->
 $.get($("#movies_search").attr("action"), $("#movies_search").serialize(), null,   'script')
 false
  });
});

movies.js.erb

$("#cresults_div").html("<%= escape_javascript(render("cresults")) %>");

我还尝试将 movie.js 中的相同代码放入 application.js 但结果没有变化。

最佳答案

所以我能够弄清楚。希望这可以帮助其他人,但这是我改变的:

Movies.js

 $(function () {  
  $('#movies_search input').keyup(function () {  
    if ($(this).val().length < 1 && e.keyCode != 13) return;
    $.get($('#movies_search').attr('action'), $('#movies_search').serialize(),    null, 'script');  
    return false;  
  });  
}) 

 $(function () {  
  $('button').click(function () {  
    $.get($('#movies_search').attr('action'), $('#movies_search').serialize(), null, 'script');  
    return false;  
  });  
})  

Application.js - 删除了导致 AJAX 搜索仅在索引页上运行的此要求。

//= require turbolinks 

添加index.js.erb

$("#cresults_div").html("<%= escape_javascript(render('cresults')) %>");

稍微更改了_sidebar.html.erb文件:

<aside id="sidebar">
 <nav>

<%= form_tag movies_path, :method => 'get', :id => "movies_search" do %>
 <center>
<p>
 <%= text_field_tag :search, params[:search] %>
 <%= submit_tag "Search", :name => nil %>
</p>
 </center>
<% end %>

<div id="cresults_div" style="margin-left: 13px; width:300px;"></div>

关于javascript - 尝试在侧边栏中执行实时 AJAX 搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21823163/

相关文章:

javascript - Ajax xml 调用、Dynatrace 仪表板的权限被拒绝

javascript - Vue 组件自循环 : Failed to mount component: template or render function not defined

javascript - 如何让登录按钮在点击后变成下拉菜单

javascript - 错误的 Chrome 扩展?

javascript - 在更改 jquery 日期选择器的日期时调用单选按钮(单击事件)不起作用

java - p :ajax passes null instead of value 中监听器的 InputText 值

php - 如何使用 jquery Ajax 验证文件类型

php - 如何将mysql表作为数组传递给javascript

javascript - 运算符 '>' 不能应用于 Angular 8 中的类型 'void' 和 'number'

javascript - jQuery : CSS smooth transition on scroll