Rails materialize-sass 具有自动完成和 cocoon gem 嵌套资源的表单

Question

我正在使用 materialize-sass gem on a form. Using autocomplete feature to get Vendor names. other fields on the form are item names and quantity which are a nested resource. For this I am using cocoon gem

出于某种原因，第一次加载页面时，一切似乎都运行良好。但是添加更多字段似乎不起作用。我尝试使用下拉菜单 select，但没有显示项目列表。我用另一个自动完成替换了它，主字段确实显示了，但是自动完成功能不起作用。知道哪里出了问题吗？

请看下面我的代码。

purchase_orders _forms.html.erb

<div class="col s12">
 <%= simple_form_for(@purchase_order) do |f| %>
 <%= f.error_notification %>
 <div class="row">
  <div class="col s6">
   <%= f.input :vendor_name, input_html: { class: 'vendor_name autocomplete' } %>
  </div>
 </div>
 <section class="show-section">
  <div class="row">
   <div class="col l12"><h4>Item List</h4></div>
   <div class="col s12">
    <%= f.simple_fields_for :purchase_order_details do |purchase_order_detail| %>
    <%= render 'purchase_order_detail_fields', :f => purchase_order_detail %>
    <div class="links">
     <%= link_to_add_association 'Add More', f, :purchase_order_details %>
    </div>
    <% end %>
   </div>
  </div>
 </section>
 <%= f.button :submit %>
 <% end %>
</div>

_purchase_order_detail_fields.html.erb

<div class="nested-fields">
 <div class="row">
  <div class="col l6">
   <%#= f.input(:item_id, collection: Ingredient.is_active, label_method: :title, value_method: :id) %>
   <%= f.input :item_name, input_html: { class: 'item_name autocomplete' } %>
  </div>
  <div class="col l5">
   <%= f.input :item_quantity %>
  </div>
  <div class="col l1">
   <%= link_to_remove_association "delete", f, :class => "material-icons teal-text text-lighten-1" %>
  </div>
  <%#= f.hidden_field :item_type , :value=> params[:category_id] %>
 </div>
</div>

Answer 1

查看他们使用的演示项目，更具体地说是他们使用的 init.js 我注意到两件事：如果您使用的是 turbolinks，则必须执行相同的操作，而使用 cocoon 时，您将拥有做类似的事情：

$('form').on('cocoon:before-insert', function(e, insertedItem) {
  $(insertedItem).find('select').material_select();
})

Answer 2

这是我用来填充自动完成的咖啡脚本

$.ajax
  url: '/packing_materials/by_name.json'
  dataType: 'json'
  success: (my_res) ->
    $ ->
      $('input.packing_material_name.autocomplete').autocomplete data: my_res

$(document).on 'cocoon:before-insert', ->
  $.ajax
    url: '/packing_materials/by_name.json'
    dataType: 'json'
    success: (my_res) ->
      $ ->
        $('input.packing_material_name.autocomplete').autocomplete data: my_res

Rails materialize-sass 具有自动完成和 cocoon gem 嵌套资源的表单

Rails materialize-sass form with autocomplete and cocoon gem nested resource

ruby-on-rails

autocomplete

material-design

cocoon-gem