带有自动完成和茧宝石嵌套资源的 Rails materialize-sass 表单答案

【问题标题】：Rails materialize-sass form with autocomplete and cocoon gem nested resource带有自动完成和茧宝石嵌套资源的 Rails materialize-sass 表单
【发布时间】：2023-03-20 23:03:01
【问题描述】：

我在表单上使用materialize-sass gem。使用自动完成功能获取供应商名称。表单上的其他字段是作为嵌套资源的项目名称和数量。为此，我使用cocoon gem

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

请看下面我的代码。

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>

【问题讨论】：

我也尝试使用回调来重新初始化materializeForm，但这似乎也不起作用。
经过进一步调查，回调是解决问题的方法。我会将答案作为我使用的咖啡脚本发布。

标签： ruby-on-rails autocomplete material-design cocoon-gem

【解决方案1】：

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

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

【讨论】：

我确实使用了回调，但所需的代码是通过 ajax 实现的，所以解决方案有点不同。

【解决方案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

【讨论】：