Jquery 使用Ajax弹出搜索表单

所以我有两个资源：

组

和

用户

。当我在

组的show.html.erb页面上时，我希望能够单击一个链接，创建一个带有搜索表单的弹出窗口，以搜索所有用户。我已经到了点击“添加用户”链接，弹出一个搜索表单的地步。搜索表单起作用，唯一的问题是我被引导到
用户
索引页面以获取结果，而我希望结果显示在此弹出窗口中

我的想法是将user's index.html.erb中的内容移动到弹出窗口中，然后通过ajax实现搜索表单功能。我不太确定如何实现这一点，尤其是考虑到我想通过
组
控制器/视图来搜索
用户
资源

组的show.html.erb

<div id="add_user"><%= link_to '(Add User)', '#' %></div>
<div class="popup" id="user_search_form">
    <%= form_tag users_path, :method => 'get' do %>
        <%= text_field_tag :search, params[:search] %>
        <%= submit_tag "Find User", :name => nil, class: "btn btn-primary" %>
    <% end %>
    <div id="close_window"><%= link_to 'Cancel', '#' %></div>
</div>

<u1 class="users">
    <div class="container-fluid">
        <%= render @users %>
    </div>
</u1>

用户控制器

def show
    @group = Group.find(params[:id])
end

def index   
    @users = User.search(params[:search]).paginate(page: params[:page])
end

用户索引.html.erb

<div id="add_user"><%= link_to '(Add User)', '#' %></div>
<div class="popup" id="user_search_form">
    <%= form_tag users_path, :method => 'get' do %>
        <%= text_field_tag :search, params[:search] %>
        <%= submit_tag "Find User", :name => nil, class: "btn btn-primary" %>
    <% end %>
    <div id="close_window"><%= link_to 'Cancel', '#' %></div>
</div>

<u1 class="users">
    <div class="container-fluid">
        <%= render @users %>
    </div>
</u1>



提前谢谢。任何帮助都将不胜感激
 添加javascript代码以处理搜索。这段代码只是通过ajax调用
users#index
操作


/views/groups/show.html.erb
添加新行

<div id="add_user"><%= link_to '(Add User)', '#' %></div>
<div class="popup" id="user_search_form">
    <%= form_tag users_path, :method => 'get', :id => 'user-search' do %>
        <%= text_field_tag :search, params[:search] %>
        <%= submit_tag "Find User", :name => nil, class: "btn btn-primary" %>
    <% end %>
    <div id="users-result"></div>
    <div id="close_window"><%= link_to 'Cancel', '#' %></div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('form#user-search').on('submit',function(event){
            event.preventDefault();
            var url = $(this).attr('action');
            var type = $(this).attr('method');
            var data = { search : $(this).find(#'search').val() };
            $.ajax({
                url: url,
                type: type,
                data: data,
                success: function (data) {
                    $('#users-result').html(data);
                }
            });
        });

    });
</script>


'get'，：id=>'user search'do%>
无，类别：“btn btn主”%>
$（文档）.ready（函数（）{
$（'form#user search'）。关于（'submit'，函数（事件）{
event.preventDefault（）；
var url=$（this.attr（'action'）；
var type=$（this.attr（'method'）；
var data={search:$（this）.find（#'search'）.val（）；
$.ajax({
url:url，
类型：类型，
数据：数据，
成功：功能（数据）{
$（“#用户结果”）.html（数据）；
}
});
});
});