web-dev-qa-db-ja.com

simple_formでselect2-Railsを使用するにはどうすればよいですか？

Thisselect2jqueryライブラリは素晴らしく見えます。 Rails gem がありますが、ドキュメントは非常に軽いです。オートコンプリートを使用して、単純な複数のドロップダウンメニューを生成したいと思います。それ、どうやったら出来るの？

これは私のsimple_form_for呼び出しです：

<%= 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" %>

select2-Rails gemを正常にインストールしましたが、どのように機能させるかがよくわかりません。

これをhome.js.coffeefileに追加します。

jQuery ->
    $('#selectWhereToLive').select2()

そして、このエラーが発生しています：

Uncaught query function not defined for Select2 selectWhereToLive

考え？

編集1：

上記のsimple_form_for呼び出しは、次の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="" />

id属性が適切に設定されていることを示します。

編集2-更新

@moonflyが提案したように、私はas: :selectをf.input_fieldに追加してみました-as: :autocompleteが含まれている場合と含まれていない場合の両方。

as: :autocompleteのない結果のHTMLは次のとおりです。

<input name="search[neighborhood_names][]" type="hidden" value="" /><select class="select optional span8" data-delimiter="," data-placeholder="Where do you want to live?" id="selectWhereToLive" multiple="multiple" name="search[neighborhood_names][]" url="/searches/autocomplete_neighborhood_name"><option value="true">Yes</option>
<option value="false">No</option></select>

2つのオプション値「はい」と「いいえ」が事前に入力されています。理由はよくわかりませんが、それがその理由です。

更新

そのため、jqueryセレクターを変更してinput#IDを検索し、忘れてしまいました。だから私はそれを元に戻し、今では選択ボックスを生成しています-しかしそれは私にそれらの2つのはいといいえのオプションを与えています。なぜそうしているのかよくわかりません。 url属性からの値が返されません。

編集3

@ harish-shettyの提案は機能しているようです。しかし、オートコンプリートとselect2メニューを使用してレコードが正常に検出された後、search.rbモデルで使用しているsetterメソッドをバイパスしています。

基本的に、私がしたいのは、ユーザーがフォームへの入力を完了し、必要な近隣のすべてのID /名前を取得したら、それらのIDのsearch_neighborhoodsに新しいレコードを作成することです。

だからこれらは私が持っている方法です：

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

  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

これは、現在のリクエストの外観です。これは、search_neighborhoodレコードが作成されていないことを示しています。

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
ruby-on-railsruby-on-rails-3simple-formjquery-select2select2-rails
15
marcamillion

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" }
%>

Javscript

$(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);
        }
      }

    });
  });
});

autocomplete_neighborhood_name_searches_pathでのアクションがハッシュのjson配列を返すことを確認してください。各ハッシュには、idフィールドとnameフィールドが含まれている必要があります。オートコンプリートの用語は、クエリパラメータnameを介して渡されます。

  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
24
Harish Shetty

タグを選択する（次にデータを読み取る）か、非表示のタグを入力するためにselectをアタッチする必要があると思います。次に、「query」関数を提供する必要があります。あなたの場合、それは入力タグに添付されているので、クエリ関数を探します。 as: :select呼び出しでf.input_fieldを設定してみてください。

1
moonfly

として使用:: select with collectionは、select2の通常の方法です。 select2でのオートコンプリートのバインドはJavaScriptの問題です。

これは私のコードサンプルです。ただし、オートコンプリートはありません。 https://Gist.github.com/kuboon/f692d9a844c0ff5877c8

0
kuboon