动态生成的字段（茧）和自动完成

Question

我正在使用 cocoon js 并试图让自动完成工作。截至目前，自动完成仅适用于初始字段。单击 'add field' 后，自动完成仍仅适用于第一个字段。

formulation.coffee

$('.formulation_line_item_dna_name').focus ->
  $(this).autocomplete
    minLength: 2,
    source: ['foo', 'food', 'four']

formulation.html.erb

...
<div class="formulation_line_items">
  <%= f.label :dna_name, "DNA", :class => "col-md-1 control-label unbold" %>
  <div class="col-md-3">
    <%= f.text_field :dna_name, :class => 'formulation_line_item_dna_name' %>
  </div>
</div>
...
<div class="add-more-formulation-line-items">
  <%= link_to_add_association 'Add Formulation Line Item', f, :formulation_line_items, 
      :class => 'btn btn-success' unless params[:command] == 'create child' %>
</div>
...

经检查，附加行项目似乎没有附加 ui-autocomplete-input class。我尝试手动将 'ui-autocomplete-input' 添加到所有动态生成的字段，但这没有用。

我也试过添加

$('.add_fields').click ->

在我的 formulation.coffee 文件中。这仍然只允许在第一个静态字段上自动完成。

Answer 1

我能够通过使用 cocoon 回调成功地允许在动态生成的字段上自动完成，例如：

$(document).ready(function(){
  $('.formulation_line_items')
    .on('cocoon:after-insert', function() {
      var tags = ["foo","foobar","foobaz"];
      $('.formulation_line_item_dna_name').focus(function(){
        $(this).autocomplete({
           minLength: 2,
           source: tags
            });
    });
  })  
});

动态生成的字段（茧）和自动完成

Dynamically generated fields (cocoon) and autocomplete

javascript

jquery

autocomplete

cocoon-gem