javascript - 在 Rails 中使用 Ajax 通过搜索框的 keyup 进行搜索

Question

我已经仔细阅读了有关该主题的所有 SO 帖子，但仍然无法使其发挥作用。有人能发现问题吗？我将在下面包含我的代码。

[search.html.erb]

<div class="col-md-offset-1 col-md-4">
  <h1>Search</h1>
    <%= form_tag(do_search_items_path, method: "post", remote: true, authenticity_token: true, role: "form",class: "form") do %>
      <div class="form-group">
        <label class="control-label">And/Or:</label>
        <%= select_tag(:all_any,
            options_for_select(
              [['match all conditions', "all"],
               ["match any conditions", "any"]]), class: "form-control") %>
      </div>

      <div class="form-group">
        <label>Category:</label>
        <%= select_tag(:category_id, options_for_select(@categories), class: "form-control") %>
      </div>

      <div class="form-group">
        <label>Search for:</label>
        <%= text_field_tag(:title, "", class: "form-control", onkeyup: "$(this).parent('div').parent('form').trigger('submit.rails')") %>
      </div>

      <div class="form-group">
        <label>Return matching or non-matching items</label>
        <%= select_tag(:match_no_match,
              options_for_select(
              [['only matching', "match"],
               ['only non matching', "nomatch"]
              ]), class: "form-control") %>
      </div>

      <%= submit_tag("Search", class: "btn btn-default" ) %>
    <% end %>
</div>

[do_search.js.erb]

$('#search_results').html("<%= escape_javascript (render(partial: 'search_results')) %>");

[来自 items_controller.rb]

  def do_search
    match_parm = params.fetch(:match_no_match)
    all_any_parm = params.fetch(:all_any)
    title_parm = params.fetch(:title)
    cat_id_parm = params.fetch(:category_id)
    @items = Item.do_item_search(
          searchtitle: title_parm,
          catid: cat_id_parm.to_i,
          all_any: all_any_parm,
          match_no: match_parm)

    respond_to do |format|
      format.js
    end
  end

[search_results.html.erb]

搜索结果

<%if @items.nil? || @items.length == 0%>
    <p>No Matches Found</p>
<% else %>
    <p><%= @items.length %> matches found</p>
    <%= render "index" %>
<% end %>

当我在搜索框中输入内容时， Controller 会按我的预期被调用，但出现错误

ActionController::UnknownFormat in ItemsController#do_search

在项目controller.rb的这一行

respond_to do |format|
  format.js
end

向我暗示 Controller 请求的类型不是 .js 并给我错误消息。

这是整个错误页面:

ActionController::UnknownFormat in ItemsController#do_search
ActionController::UnknownFormat

Extracted source (around line #62):
60              match_no: match_parm)
61
62    respond_to do |format|
63      format.js
64    end
65  end

Rails.root: /mydev/form_and_pusher_demo

Application Trace | Framework Trace | Full Trace
app/controllers/items_controller.rb:62:in `do_search'
Request

Parameters:

{"utf8"=>"✓",
 "authenticity_token"=>"knh/nZgRNwSUv2Nmq76L2ShcNjy8ragcVfipUUTBz/bpZ2RW8m2ohHPtn7DhQ1w1BP7cSxAxkRIDr4E/6eaLug==",
 "all_any"=>"all",
 "category_id"=>"0",
 "title"=>"a",
 "match_no_match"=>"match"}

[路线.rb]

  resources :items do
    collection do
      get 'search'
      post 'do_search'
    end
    resources :comments, only: [:index, :new, :create]
  end

你看到我错过了什么了吗？

Answer 1

我在这里找到了答案:How do I submit a Rails AJAX form using onclick

基本上，我没有使用 JS 来尝试模拟“提交”，而是完全绕过“oclick”或“onkeyup”事件，并使用 $.ajax 来执行适当的后台请求。

// Do the async post or get to the right URL and 
// use the .serialize to prepare the data for the server to use.

function submitFrmAjax(){
   $.ajax({
         url : "/items/do_search",
         data : $("form#search").serialize()
    });
}

感谢大家对此的帮助!