Question

我正在使用cocoon js并尝试自动完成工作。截至目前，自动填充仅适用于初始字段。点击“添加字段”后，自动填充功能仍然只适用于第一个字段。

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类。我尝试手动将“ui-autocomplete-input”添加到所有动态生成的字段，但这不起作用。

我也尝试过添加

$('.add_fields').click ->

在我的recipe.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
            });
    });
  })  
});

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

1 个答案: