0

ページに 2 つの異なるオートコンプリート フィールドがあり、データベース内の異なるソースから入力されます。私の問題は、ページをテストするときに、2 つのオートコンプリート動作が互いのテキスト フィールドで切り替わることがあることです。

ビューのパーシャルは次のようになります (私はrailscastsに従いました):

<fieldset>
  <%= f.text_field :ability_title, {:class => 'autocomplete_field', data: { autocomplete_source: abilities_path } } %>
  <%= f.label :points %>: <%= f.text_field :points %>
  <%= f.hidden_field :_destroy %>
  <%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>

<fieldset>
  <%= f.text_field :mission_title, {:class => 'autocomplete_field', data: {autocomplete_source: missions_path } } %>
  <%= f.hidden_field :_destroy %>
  <%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>

私のJavaScript：

jQuery ->
  $('fieldset').live 'click', ->
    $('.autocomplete_field').autocomplete
      source: $('.autocomplete_field').data('autocomplete-source')

そして私のコントローラー：

def index
  if params[:term].present?
    @abilities = Ability.search_titles(params[:term])
  else
    @abilities = Ability.all
  end

  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: @abilities }
  end
end

def index
  if params[:term].present?
    @missions = Mission.search_titles(params[:term])
  else
    @missions = Mission.all
  end

  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: @missions.map(&:title) }
  end
end

ありがとう

4

2 に答える 2

2

両方のテキスト フィールドを ID で区別するだけでよいと思います。

<fieldset>
  <%= f.text_field :ability_title, {:id => 'autocomplete_field1', data: { autocomplete_source: abilities_path } } %>
  <%= f.label :points %>: <%= f.text_field :points %>
  <%= f.hidden_field :_destroy %>
  <%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>

<fieldset>
  <%= f.text_field :mission_title, {:id => 'autocomplete_field2', data: {autocomplete_source: missions_path } } %>
  <%= f.hidden_field :_destroy %>
  <%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>
My javascript:

jQuery ->
  $('fieldset').live 'click', ->

    $('#autocomplete_field1').autocomplete
      source: $('#autocomplete_field1').data('autocomplete-source')
    $('#autocomplete_field2').autocomplete
      source: $('#autocomplete_field2').data('autocomplete-source')

編集:よりエレガントなソリューション:

jQuery ->
  $('fieldset').live 'click', ->
    $('#autocomplete_field1, #autocomplete_field2').each (index, element) =>
      $(element).autocomplete
        source: $(element).data('autocomplete-source')
于 2012-10-08T09:57:32.197 に答える
0

Try if this works replace source in your js file 

source: $(this).data('autocomplete-source')
于 2012-10-08T10:14:16.213 に答える