15

この select2jquery ライブラリは素晴らしいですね。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" %>

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

home.js.coffeeこれをファイルに追加します。

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_fieldas: :autocomplete

結果の HTMLas: :autocompleteは次のとおりです。

<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
4

3 に答える 3

1

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

于 2013-02-28T23:01:06.770 に答える
0

次のように使用します: :コレクションを使用した選択は、select2 の通常の方法です。select2 でオートコンプリートをバインドするのは JavaScript の問題です。

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

于 2015-11-20T06:35:56.227 に答える