Rails 5 Live Search with Keyup 失去输入焦点 Turbolinks

Posted 2023-02-22

【中文标题】Rails 5 Live Search with Keyup 失去输入焦点 Turbolinks

【英文标题】：Rails 5 Live Search with Keyup losing input focus Turbolinks

【发布时间】：2018-02-05 01:01:40

【问题描述】：

我有一个 Rails 5.1.3 应用程序，它是一个基本的联系模型（方便的名称和号码）。我正在使用 ransack 在索引视图/页面上进行搜索。我正在使用咖啡脚本来监听输入上的 keyup 事件，它正在工作，在我键入时触发（根据 rails 开发日志），但是表单上的输入失去焦点，并且当我单击时，部分不会继续刷新回到 put 和 type。我认为这是一个 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)

【问题讨论】：

似乎部分未使用索引方法中更新的联系人进行更新。尝试将$("#results").html("<%=j render :partial => 'contacts/results' %>") 更改为$("#results").html("<%=j render :partial => 'contacts/results', locals: contacts: @contacts %>") 并将@contacts 更改为contacts in _results.html.erb

您还需要将<%= render 'contacts/results' %> 更改为<%= render 'contacts/results', contacts: @contacts %> 在正常情况下不会出错

@Pavan 实际上我已经尝试过了，但没有任何区别。任何其他想法，此代码在以前的类似应用中都有效。

> fires one letter and stalls completely 当您运行 script 而不是 json 时，控制台日志是什么样的？您可以将日志记录添加到您的 .js.erb 视图中吗？

【参考方案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 %>")

而且效果很好。