试图在侧边栏中执行实时AJAX搜索

  • Z时代
  • 2024-01-10
  • 分类：问答

我是AJAX搜索的新手，也是Rails的新手。我正在尝试在我的应用的侧栏中创建一个搜索表单，以便将其包含在每个页面中。只有当输入搜索时，我才需要搜索结果才显示在当前页面上。试图在侧边栏中执行实时AJAX搜索

我有一个'电影'表，我刚开始搜索“标题”列。这是我到目前为止。现在，搜索不仅仅返回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

movie.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")) %>");

我也试图把相同的代码从电影。 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搜索到的唯一工作索引页面。

加成

index.js.erb的 

//= require turbolinks 

$("#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>

以上是 试图在侧边栏中执行实时AJAX搜索 的全部内容， 来源链接： utcz.com/qa/259256.html

回到顶部