Ruby on rails 如何在简单表单中使用select2 rails？

select2jquerylibrary看起来棒极了。这是一个很好的例子，但是文档中的内容非常简单。 我想使用autocomplete生成一个简单的多下拉菜单。我该怎么做

这是我打电话的简单表格：

<%= f.input_field :neighborhood_names, url: autocomplete_neighborhood_name_searches_path, as: :autocomplete, data: { delimiter: ',', placeholder: "Where do you want to live?"}, multiple: true, id: "selectWhereToLive", class: "span8" %>

我得到了这个错误：

Uncaught query function not defined for Select2 selectWhereToLive 

想法

编辑1：

上面的调用的简单表单正在生成此HTML：

<input class="autocomplete optional span8" data-autocomplete="/searches/autocomplete_neighborhood_name" data-delimiter="," data-placeholder="Where do you want to live?" id="selectWhereToLive" multiple="multiple" name="search[neighborhood_names][]" size="30" type="text" url="/searches/autocomplete_neighborhood_name" value="" />

它预先填充2个选项值“是”和“否”。不太清楚为什么，但它就是这样做的

更新

因此，我更改了jquery选择器以查找inputID，但忘记了。所以我把它设置回去，现在它正在生成选择框——但它给了我这两个是与否选项。不太清楚它为什么这样做。它没有从我的url属性返回中的值

编辑3

@哈里什·谢蒂的建议似乎奏效了。但是现在，在它通过autocomplete和select2菜单成功找到记录之后，它绕过了我在search.rb模型上使用的setter方法

基本上，我想做的是，一旦用户填写完表单——我有了他们想要的社区的所有ID/名称，我想在search_Neighbources中为这些ID创建一个新记录

以下是我的方法：

Search.rb

  def neighborhood_names
    neighborhoods.map(&:name).join(',')
  end

  # we need to put [0] because it returns an array with a single element containing
  # the string of comma separated neighborhoods
  def neighborhood_names=(names)
    names[0].split(',').each do |name|
      next if name.blank?
      if neighborhood = Neighborhood.find_by_name(name)
        search_neighborhoods.build neighborhood_id: neighborhood.id
      end
    end
  end

我的SearchController.rb

这就是请求现在的样子-这表明没有创建搜索记录：

Started POST "/searches" for 127.0.0.1 at 2013-03-06 04:09:55 -0500
Processing by SearchesController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"7SeA=", "search"=>{"boro_id"=>"", "neighborhood_names"=>"1416,1394", "property_type_id"=>"", "min_price"=>"", "max_price"=>"", "num_bedrooms"=>"", "num_bathrooms"=>""}}
  Neighborhood Load (0.5ms)  SELECT "neighborhoods".* FROM "neighborhoods" WHERE "neighborhoods"."name" = '1' LIMIT 1
   (0.3ms)  BEGIN
  SQL (0.8ms)  INSERT INTO "searches" ("amenity_id", "boro_id", "created_at", "keywords", "listing_type_id", "max_price", "min_price", "neighborhood_id", "num_bathrooms", "num_bedrooms", "property_type_id", "square_footage", "updated_at") VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13) RETURNING "id"  [["amenity_id", nil], ["boro_id", nil], ["created_at", Wed, 06 Mar 2013 09:09:55 UTC +00:00], ["keywords", nil], ["listing_type_id", nil], ["max_price", nil], ["min_price", nil], ["neighborhood_id", nil], ["num_bathrooms", nil], ["num_bedrooms", nil], ["property_type_id", nil], ["square_footage", nil], ["updated_at", Wed, 06 Mar 2013 09:09:55 UTC +00:00]]
   (32.2ms)  COMMIT
Redirected to http://localhost:3000/searches/29

---

我相信您需要附加select来选择标签，然后它从中读取数据，或者输入隐藏标签，然后您需要提供“查询”功能。在您的例子中，它被附加到一个输入标记，因此寻找一个查询函数。在f.input\U字段调用中尝试设置为：：select。

select2插件支持自动完成。您可以按如下方式使用本机自动完成：

<%= f.input_field :ac_neighborhood_ids, 
      data: { 
        placeholder: "Where do you want to live?",
        saved: @search.neighborhoods.to_json,
        url: autocomplete_neighborhood_name_searches_path
      }, 
      input_html:  { class: "span8 ac-select2" }
%>

确保autocomplete\u neighborhood\u name\u searches\u path处的操作返回一个json哈希数组。每个散列应该包含id和name字段。自动完成的术语通过查询参数名称传递

您的搜索模式：

class Search

  attr_accessor :ac_neighborhood_ids

  has_many :search_neighborhoods
  has_many :neighborhoods, through: :search_neighborhoods

  def ac_neighborhood_ids
    neighborhood_ids.join(",")
  end

  def ac_neighborhoods
    neighborhoods.map{|n| {:id => n.id, :name => n.name}}
  end

  def ac_neighborhood_ids=(ids)
    search_neighborhoods.clear # remove the old values
    ids.split(',').select(&:present?).map do |neighborhood_id|
      search_neighborhoods.build neighborhood_id: neighborhood_id
    end
  end

end    

---

使用as:：select with collection是选择2的常规方法。 在select2上绑定autocomplete是一个javascript问题

这是我的代码示例。但没有自动完成功能。

---

我可以打两个as:电话吗？目前有一个是：：autocomplete。我根据你的建议用HTML输出更新了这个问题。简而言之，它不起作用：不，只有一个。如果您需要将其保留为：：autocomplete，则必须定义“query”函数。耶……即使：：select不起作用……出于w/e原因，它也会生成那些是/否选项值字段。这很奇怪，因为URL调用返回的数据不应该是yes/no。它应该是一个名称。对于select，您需要提供包含所有值的集合。例如，检查。在您的情况下，似乎您别无选择，只能创建一个“查询”函数，该函数将从/searches/autocomplete\u neighbourth\u名称中检索值。所以，忘了我建议的那样做：：select，集中精力编写'query'Hrmm….我使用的是rails3 jquery自动完成gem--这样就根据我在控制器顶部的声明生成了自动完成\u邻居\u名称\u搜索\u路径。我是否应该删除该声明并手动创建操作？如果是，我应该在哪个控制器上创建操作？我的搜索控制器？这就是现在声明自动完成的地方。我过去就是这样做的。您应该在搜索控制器中添加该操作，并将其注册为路由文件中的收集操作。当每件事都能正常工作时，你应该看到自动完成的效果，比如下面这个例子：这是拼图中最后一个缺失的部分……现在我终于让它工作了——但是当它执行搜索时，它绕过了search.rb模型中的setter方法。我将用更多的代码更新这个问题。我还添加了一个请求的日志输出，这表明它跳过了我的setter方法。很好，你让它工作了。我会让你知道，当我创造的宝石。顺便说一句，我更新了ac_neighbory_id=方法来清除旧社区。否则你会积累社区。毕竟，Edit3完全是另一个问题。我建议你再发一个问题。我想你需要在控制器上输入你的名字。

Started POST "/searches" for 127.0.0.1 at 2013-03-06 04:09:55 -0500
Processing by SearchesController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"7SeA=", "search"=>{"boro_id"=>"", "neighborhood_names"=>"1416,1394", "property_type_id"=>"", "min_price"=>"", "max_price"=>"", "num_bedrooms"=>"", "num_bathrooms"=>""}}
  Neighborhood Load (0.5ms)  SELECT "neighborhoods".* FROM "neighborhoods" WHERE "neighborhoods"."name" = '1' LIMIT 1
   (0.3ms)  BEGIN
  SQL (0.8ms)  INSERT INTO "searches" ("amenity_id", "boro_id", "created_at", "keywords", "listing_type_id", "max_price", "min_price", "neighborhood_id", "num_bathrooms", "num_bedrooms", "property_type_id", "square_footage", "updated_at") VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13) RETURNING "id"  [["amenity_id", nil], ["boro_id", nil], ["created_at", Wed, 06 Mar 2013 09:09:55 UTC +00:00], ["keywords", nil], ["listing_type_id", nil], ["max_price", nil], ["min_price", nil], ["neighborhood_id", nil], ["num_bathrooms", nil], ["num_bedrooms", nil], ["property_type_id", nil], ["square_footage", nil], ["updated_at", Wed, 06 Mar 2013 09:09:55 UTC +00:00]]
   (32.2ms)  COMMIT
Redirected to http://localhost:3000/searches/29

<%= f.input_field :ac_neighborhood_ids, 
      data: { 
        placeholder: "Where do you want to live?",
        saved: @search.neighborhoods.to_json,
        url: autocomplete_neighborhood_name_searches_path
      }, 
      input_html:  { class: "span8 ac-select2" }
%>

$(document).ready(function() {  
  $('.ac-select2').each(function() {
    var url = $(this).data('url'); 
    var placeholder = $(this).data('placeholder'); 
    var saved = jQuery.parseJSON($(this).data('saved'));
    $(this).select2({
      minimumInputLength: 2,
      multiple: true,
      placeholder : placeholder,
      allowClear: true,
      ajax: {
        url: url,
        dataType: 'json',
        quietMillis: 500,
        data: function (term) {
          return {
            name: term
          };
        },
        results: function (data) {
          return {results: data};
        }
      },

      formatResult: function (item, page) {
        return item.name; 
      },

      formatSelection: function (item, page) {
        return item.name; 
      },

      initSelection : function (element, callback) {
        if (saved) {
          callback(saved);
        }
      }

    });
  });
});

  def autocomplete_neighborhood_name
    @neighborhood = Neighborhood.select("id, name").where("name LIKE ?", "#{params[:name]}%").order(:name).limit(10)

    respond_to do |format|
      format.json { render json: @neighborhood , :only => [:id, :name] }
    end    
  end

class Search

  attr_accessor :ac_neighborhood_ids

  has_many :search_neighborhoods
  has_many :neighborhoods, through: :search_neighborhoods

  def ac_neighborhood_ids
    neighborhood_ids.join(",")
  end

  def ac_neighborhoods
    neighborhoods.map{|n| {:id => n.id, :name => n.name}}
  end

  def ac_neighborhood_ids=(ids)
    search_neighborhoods.clear # remove the old values
    ids.split(',').select(&:present?).map do |neighborhood_id|
      search_neighborhoods.build neighborhood_id: neighborhood_id
    end
  end

end