如何通过 jQuery 发送选定元素和文本输入

Question

我的应用实现了实时搜索，并且运行正常。我遇到的问题是现在我有一个包含很多列的表，我想搜索所有元素。我只想有一个文本输入和一个下拉菜单，用于选择我要搜索的列。

可搜索模块

module Searchable
  extend ActiveSupport::Concern

  module ClassMethods
    def search_for(present_column,record)
      record.present? ? where(present_column+' LIKE ?', record+"%") : all
    end
  end
end

人员控制器

class PeopleController < ApplicationController
  def index
    @people = Person.page(params[:page]).per(5).search_for(params[:object_columns], params[:search])
  end

搜索引擎

<%= form_tag do %>
  <% valid_column_names = target.column_names.reject{|r| r == "created_at" || r == "updated_at" || r == "slug"} %>
  <%= select_tag :object_columns, options_for_select(valid_column_names) %>
  <%= text_field_tag :search, '', autocomplete: :off %>
<% end %>

实时搜索 js

$(function () {
    $("input#search").keyup(function () {
        $.get($("#object_columns option:selected").text(), $("#object_columns").serialize(), null, "script");
        $.get($("#search").attr("action"), $("#search").serialize(), null, "script");
    });
});

输入文本按预期返回，但 object_columns 中没有任何内容。例如，当我键入单词“n”时，我的服务器终端会返回此消息：

Started GET "/people?&search=n&_=1463081307356" for 127.0.0.1 at 2016-05-12 16:28:34 -0300
Processing by PeopleController#index as JS
  Parameters: {"search"=>"n", "_"=>"1463081307356"}

编辑：

后来我有了一个想法并做了一些改变。我给表单一个 ID 并用它来做请求，现在我可以同时拥有两个信息（列名和搜索记录）。现在唯一的问题是路径，它返回一个 URI 错误。

搜索引擎

<%= form_tag people_path, class: "form_id" do %>
  <% valid_column_names = target.column_names.reject{|r| r == "created_at" || r == "updated_at" || r == "slug"} %>
  <%= select_tag :object_columns, options_for_select(valid_column_names) %>
  <%= text_field_tag :search, '', autocomplete: :off %>
<% end %>

实时搜索

$(function () {
    $("input#search").keyup(function () {
        $.get($(".form_id"), $(".form_id").serialize(), null, "script");null, "script");
    });
});

Answer 1

在您的search_for 方法中，返回值始终为all。您确实希望返回值是其正上方的三元运算符的结果。删除最后一个all，您应该可以继续使用了。

module ClassMethods
  def search_for(present_column,record)
    record.present? ? where(present_column+' LIKE ?', record+"%") : all
    # all  <== this should be removed
  end
end

在您的 javascript 中，您需要进行一些更改：

$(function () {
    function search() {
        $.get("/search", { column_name: $("select#column_name").val(), search: $("#search").val() }, null, "script");
    };

    $("select#column_name").change(search); 
    $("input#search").keyup(search);
});

实际的 Ajax 调用已更改为：

• 删除搜索输入字段中未定义的“动作”属性
• 明确引用 URL 以发送请求
• 为 ajax 调用创建哈希参数
• 删除对serialize()的不必要调用

这还会在列选择的change 事件上安装一个处理程序，因此将 Ajax 调用重构为一个单独的函数。