Question

改编this Railscast在我的应用中处理我的展示页面，搜索工作正常，但它不是即时的（也不奇怪，它是否在关键字上，尽管它确实适用于提交，我认为我没有编码）。

正如我在下面的更新中所提到的，当我尝试通过向form_tag添加“remote：true”（与RailsCast的偏差）来解决问题时，搜索将完全停止运行。知道发生了什么事吗？

index.html.erb

<%= form_tag @post, :method => 'get', :id => "posts_search", class: "search_form squeeze form-inline" do %>
  <p>
    <%= text_field_tag :search, params[:search], 
    placeholder: "Search titles:", id: "search_field" %>
    <%= submit_tag "Search", name: nil, class: "btn squeeze search" %>
  </p>
  <div id="list"><%= render 'search' %></div>
<% end %>

_search.html.erb

<ul class="blog_links">
<% @posts.first(@link_num).each do |p| %>
    <li class="total_hover">
        <%= p.name %>
    </li>
<% end %>
</ul>

index.js.erb的

$("#list").html("<%= escape_javascript(render("search")) %>");

posts_controller.rb

  def index
    @posts = Post.search(params[:search]).reverse

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @posts }
    end
  end



 def search
    @posts = Post.search(params[:search]).reverse
    render json: { results: @posts }
 end

post.rb

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

Javascript角/ posts.js.coffee

$ -> 
  $("#posts_search input").keyup ->
    $.get $("#posts_search").attr("action"), $("#posts_search").serialize(), null, "script"
    false

的routes.rb

match '/search', to: 'posts#search'

编辑 - 当我将“remote：true”添加到我的form_tag时，搜索将完全停止。如同，它既不会在密钥上搜索，也不会在提交时进行搜索。

有趣的是，我的网络（在检查员中）似乎在每次（并且仅在何时）按下提交时发出GET请求。该请求包括我的搜索词，因此，例如，当我在帖子的页面上名为“这是一个非常长的帖子名称”（带有一个slugged url）并且我搜索“long”时，请求是这样的：

http://localhost:3000/posts/this-is-a-really-long-post-title?utf8=%E2%9C%93&search=long

该URL实际上并未显示在URL栏中，但它位于网络请求中。

编辑 - 遵循Paulo的建议将远程移动：true到我的form_tag中的正确位置。所以：

<%= form_tag @post, remote: true, method: 'get', id: "posts_search", class: "search_form squeeze form-inline" do %>

再一次，使用remote：true会停止搜索功能。当我检查那个元素时，我明白了：

<form accept-charset="UTF-8" action="/posts/this-is-a-really-long-post-title" class="search_form squeeze form-inline" data-remote="true" id="posts_search" method="get">

“这是一个非常长的标题后”是我正在进行搜索的页面上的帖子的标题。它也是网址中的slu ..因此，我认为问题可能是我在此标签中调用的操作。建议使用'/ posts'，但是a）我在节目中进行此搜索，而不是索引页面，以及b）当我尝试'/ posts'时，会生成此表单标记：

<form accept-charset="UTF-8" action="/posts" class="search_form squeeze form-inline" data-remote="true" id="posts_search" method="get">

我按下搜索时出现此错误（在控制台检查器中）（每当我在搜索框中输入时类似的一个，因此键盘工作正常）。

GET http://localhost:3000/posts?utf8=%E2%9C%93&search= 404 (Not Found) jquery.js:8476
 send jquery.js:8476
 jQuery.extend.ajax jquery.js:7931
 $.rails.rails.ajax jquery_ujs.js:110
 $.rails.rails.handleRemote jquery_ujs.js:175
 (anonymous function) jquery_ujs.js:392
 jQuery.event.dispatch jquery.js:3046
 elemData.handle jquery.js:2722

编辑 - 如果我删除了远程：true，就像在Railscast中一样，并在路径中使用@post，我得到了这个奇怪的行为组合：

虽然我的javascript不再有与表单的提交相关联的任何操作，但当我提交搜索时，页面会完全重新加载并执行搜索并正确显示。
当我输入时，Firebug控制台会显示每次按键时触发的请求（根据我的JS，这是有道理的），但实际页面上没有任何反应。

同样，当我添加remote：true时，页面上根本没有任何事情发生。

编辑 - 如果我删除了posts.js.coffee的内容，则搜索执行完全相同。就像在，如果在form_tag中没有remote：true，它可以工作，但只有在按下提交时才有效。为什么它忽略了.js.coffee文件中发生的事情？

编辑回应JVNILL的答案

我将posts.js.coffee中的代码替换为jvnill建议的内容。现在搜索根本不起作用，但似乎这是在javascript中调用搜索函数而不执行其操作的结果，因为preventDefault调用似乎正在工作，并且当我搜索时（此处为“真的“），浏览器似乎将我的按键发送为params：

Started GET "/archive?utf8=%E2%9C%93&search=rea&_=1362073395037" for 127.0.0.1 at 2013-02-28 09:43:17 -0800
Processing by PostsController#index as JS
  Parameters: {"utf8"=>"✓", "search"=>"rea", "_"=>"1362073395037"}
  Post Load (0.2ms)  SELECT "posts".* FROM "posts" WHERE (name LIKE '%rea%')
  Rendered posts/_search.html.erb (0.5ms)
  Rendered posts/index.html.erb within layouts/application (1.8ms)
  Rendered layouts/_shim.html.erb (0.0ms)
  Rendered layouts/_header.html.erb (0.5ms)
Completed 200 OK in 23ms (Views: 21.5ms | ActiveRecord: 0.2ms)


Started GET "/archive?utf8=%E2%9C%93&search=real&_=1362073395038" for 127.0.0.1 at 2013-02-28 09:43:17 -0800
Processing by PostsController#index as JS
  Parameters: {"utf8"=>"✓", "search"=>"real", "_"=>"1362073395038"}
  Post Load (0.1ms)  SELECT "posts".* FROM "posts" WHERE (name LIKE '%real%')
  Rendered posts/_search.html.erb (0.6ms)
  Rendered posts/index.html.erb within layouts/application (1.9ms)
  Rendered layouts/_shim.html.erb (0.0ms)
  Rendered layouts/_header.html.erb (0.4ms)
Completed 200 OK in 50ms (Views: 49.2ms | ActiveRecord: 0.1ms)


Started GET "/archive?utf8=%E2%9C%93&search=real&_=1362073395039" for 127.0.0.1 at 2013-02-28 09:43:17 -0800
Processing by PostsController#index as JS
  Parameters: {"utf8"=>"✓", "search"=>"real", "_"=>"1362073395039"}
  Post Load (0.1ms)  SELECT "posts".* FROM "posts" WHERE (name LIKE '%real%')
  Rendered posts/_search.html.erb (0.6ms)
  Rendered posts/index.html.erb within layouts/application (2.0ms)
  Rendered layouts/_shim.html.erb (0.0ms)
  Rendered layouts/_header.html.erb (0.5ms)
Completed 200 OK in 17ms (Views: 16.1ms | ActiveRecord: 0.1ms)


Started GET "/archive?utf8=%E2%9C%93&search=reall&_=1362073395040" for 127.0.0.1 at 2013-02-28 09:43:17 -0800
Processing by PostsController#index as JS
  Parameters: {"utf8"=>"✓", "search"=>"reall", "_"=>"1362073395040"}
  Post Load (0.2ms)  SELECT "posts".* FROM "posts" WHERE (name LIKE '%reall%')
  Rendered posts/_search.html.erb (0.5ms)
  Rendered posts/index.html.erb within layouts/application (1.8ms)
  Rendered layouts/_shim.html.erb (0.0ms)
  Rendered layouts/_header.html.erb (0.4ms)
Completed 200 OK in 16ms (Views: 15.2ms | ActiveRecord: 0.2ms)


Started GET "/archive?utf8=%E2%9C%93&search=reall&_=1362073395041" for 127.0.0.1 at 2013-02-28 09:43:17 -0800
Processing by PostsController#index as JS
  Parameters: {"utf8"=>"✓", "search"=>"reall", "_"=>"1362073395041"}
  Post Load (0.2ms)  SELECT "posts".* FROM "posts" WHERE (name LIKE '%reall%')
  Rendered posts/_search.html.erb (0.6ms)

Answer 1

我不完全确定我是否理解正确但您使用原始设置，您的搜索工作正常吗？您只想通过ajax提交表单？另外，您有延迟的搜索响应？我希望以下代码能解决这两个问题

@search = ->
  $.get $('#posts_search').attr("action"), $("#posts_search").serialize(), null, "script"

$ ->
  $('#posts_search input').keypress -> search()

  $('#posts_search').submit (e) ->
    e.preventDefault()
    search()

您可以使用按键而不是键盘或使用观察搜索字段更改的插件，例如delayedObserver。您还需要观察提交表单的时间并使用ajax而不是正常的表单提交

更新：刚刚注意到日志显示你要进行索引操作，它实际上是渲染一个html模板，这意味着你没有js模板。所以将show.js.erb复制到index.js.erb。

更新：编辑索引操作。您需要添加的另一件事是在respond_to块内部有一条format.js行，因此它不会默认为html。

def index
  @posts = Post.search(params[:search]).reverse

  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: @posts }
    format.js
  end
end

Answer 2

将远程选项添加到form_tag。查看docs。

<%= form_tag('/posts', :remote => true) %>
# => <form action="/posts" method="post" data-remote="true">

使用firebug检查生成的表单是否将data-remove标记设置为true。

不能AJAXify功能搜索

2 个答案: