Rails 5使用Keyup的Live搜索失去输入焦点Turbolinks

Question

我有一个基本的联系模型（方便的名称和数字）的rails 5.1.3应用程序。我正在使用ransack在索引视图/页面上进行搜索。我正在使用coffeescript来监听输入上的按键事件，并且它正在工作，当我键入（每个rails开发日志）时触发，但表单上的输入失去焦点，并且局部不会继续刷新，因为我单击回到投入和类型。我在想这是一个Turbolinks问题，但我不确定。

这里是我的控制器：contacts_controller.rb 摘录

class ContactsController < ApplicationController 

    def index 
    @q = Contact.ransack(params[:q]) 
    @contacts = @q.result(distinct: true).order("name asc").paginate(:page => params[:page], :per_page => 2) 
    respond_to do |format| 
     format.html 
     format.js {render "index", :locals => {:contacts => @contacts}} 
    end 
    end 
end 

这里是我的索引视图index.html.erb

<%= link_to "New Contact", '#contact-modal', data: {toggle: "modal", target: "#contact-modal" }, class: 'btn btn-info btn-sm' %> 
<%= render 'shared/contact_modal' %> 
<div id="search"> 
    <%= render 'contacts/search' %> 
</div> 

<div id="results"> 
    <%= render 'contacts/results', contacts: @contacts %> 
</div> 

这里是我的JS文件index.js .erb

$("#search").html("<%=j render :partial => 'contacts/search' %>") 
$("#results").html("<%=j render :partial => 'contacts/results', locals: {contacts: @contacts} %>") 

这里是搜索和结果谐音

<%= search_form_for(@q, url: "/contacts", method: :get, id: "contacts_search", remote: true) do |f| %> 
    <%= f.search_field :name_or_address_or_office_number_or_home_number_or_mobile_number_or_fax_number_or_email_or_misc_info_cont, placeholder: 'Search...', class: 'form-control' %> 
    <%= f.submit %> 
<% end %> 



<table class="table table-striped"> 
    <thead class="thead-default"> 
    <tr> 
     <th>Name</th> 
     <th>Company Name</th> 
     <th>Office Number</th> 
     <th>Mobile Number</th> 
     <th>Home Number</th> 
     <th>Address</th> 
     <th>Email</th> 
    </tr> 
    </thead> 
    <tbody> 
    <% contacts.each do |contact| %> 
    <tr> 
     <td><%= link_to "#{contact.name}", contact_path(contact) %></td> 
     <td><%= contact.company_name %> 
     <td><%= contact.office_number %></td> 
     <td><%= contact.mobile_number %></td> 
     <td><%= contact.home_number %></td> 
     <td><%= contact.address %></td> 
     <td><%= contact.email %></td> 
    </tr> 
    <% end %> 
    </tbody> 
</table> 
<%= will_paginate contacts, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %> 

这里是我的contacts.coffee文件

$(document).on 'turbolinks:load', -> 
    $('#contacts_search input').keyup -> 
    $.get $('#contacts_search').attr('action'), $('#contacts_search').serialize(), null, 'script' 
    false 

这里是development.log的摘录其中显示被解雇的方法，但我的部分不爽。它触发了一封信并完全停顿，失去了对表单输入的关注。

我在这里错过了什么或者是我的咖啡错误？

Started GET "/contacts?utf8=%E2%9C%93&q%5Bname_or_address_or_office_number_or_home_number_or_mobile_number_or_fax_number_or_email_or_misc_info_cont%5D=a&_=1504386143674" for 127.0.0.1 at 2017-09-02 16:02:25 -0500 
Processing by ContactsController#index as JS 
    Parameters: {"utf8"=>"✓", "q"=>{"name_or_address_or_office_number_or_home_number_or_mobile_number_or_fax_number_or_email_or_misc_info_cont"=>"a"}, "_"=>"1504386143674"} 
    User Load (0.3ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 7], ["LIMIT", 1]] 
    Role Load (0.1ms) SELECT "roles".* FROM "roles" WHERE "roles"."name" = $1 LIMIT $2 [["name", "disabled"], ["LIMIT", 1]] 
    Role Load (0.1ms) SELECT "roles".* FROM "roles" WHERE "roles"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]] 
    CACHE Role Load (0.0ms) SELECT "roles".* FROM "roles" WHERE "roles"."name" = $1 LIMIT $2 [["name", "disabled"], ["LIMIT", 1]] 
    Rendering contacts/index.js.erb 
    Rendered contacts/_search.html.erb (1.4ms) 
    Contact Load (0.7ms) SELECT DISTINCT "contacts".* FROM "contacts" WHERE ((((((("contacts"."name" ILIKE '%a%' OR "contacts"."address" ILIKE '%a%') OR "contacts"."office_number" ILIKE '%a%') OR "contacts"."home_number" ILIKE '%a%') OR "contacts"."mobile_number" ILIKE '%a%') OR "contacts"."fax_number" ILIKE '%a%') OR "contacts"."email" ILIKE '%a%') OR "contacts"."misc_info" ILIKE '%a%') ORDER BY name asc LIMIT $1 OFFSET $2 [["LIMIT", 2], ["OFFSET", 0]] 
    (0.3ms) SELECT COUNT(DISTINCT "contacts"."id") FROM "contacts" WHERE ((((((("contacts"."name" ILIKE '%a%' OR "contacts"."address" ILIKE '%a%') OR "contacts"."office_number" ILIKE '%a%') OR "contacts"."home_number" ILIKE '%a%') OR "contacts"."mobile_number" ILIKE '%a%') OR "contacts"."fax_number" ILIKE '%a%') OR "contacts"."email" ILIKE '%a%') OR "contacts"."misc_info" ILIKE '%a%') 
    Rendered contacts/_results.html.erb (3.7ms) 
    Rendered contacts/index.js.erb (9.6ms) 
Completed 200 OK in 32ms (Views: 25.8ms | ActiveRecord: 1.6ms) 

Answer 1

实际发生的事情是，JS会触发，我的搜索表单部分将重新加载。所以我改变了这一点：

$("#search").html("<%=j render :partial => 'contacts/search' %>") 
$("#results").html("<%=j render :partial => 'contacts/results', locals: {contacts: @contacts} %>") 

这样：

$("#results").html("<%=j render :partial => 'contacts/results', locals: {contacts: @contacts} %>") 

而且它完美的作品。