通过部分在单个页面上显示多个 form_tags

Question

我的应用程序有一个为用户的每个餐点对象渲染的部分，有效地列出了餐点。每顿饭都有一些食物列在下面。我有一个 form_tag 和 text_field_tag，它们位于使用自动完成功能的每餐最后一道食物的下方。

当我输入第一个 text_field 时，我可以看到我的服务器正在处理请求。虽然当我在第一个下面的其他 text_fields 中输入一些内容时，服务器似乎根本没有处理任何内容。

似乎 form_tag 仅应用于其正下方的第一个 text_field_tag，因为 chrome 控制台在其下方显示了一个结束标记。

form_tag 根本不会出现在其他 text_field_tags 中。

有趣的是，form_tag 下的默认隐藏 div 确实会显示给其他 form_tags...

这是我的部分

<td class=search-form-block>
  <%= form_tag({:controller => "foods", :action => "save_selected"}, method: "post") %>

  <%= text_field_tag 'search_food_text_field', nil, data: { catcomplete_source: search_foods_path } %>

</td>
<td class=remove-td-center> <%= link_to "new food", nil,  {class: "new-food-button"} %> </td> 

自动完成 jquery：

 $( "#search_food_text_field" ).catcomplete({
   source: $("#search_food_text_field").data('catcomplete-source')
}); 

如何让页面上的每个表单按照自动完成的方式工作，就像第一个 form_tag/text_field_tag 一样？

提前致谢！

Answer 1

我很确定您在这里遇到了两个不同的问题。

关于表单标签，form_tag 根本不包含结束标签，除非它被称为块。 Chrome 控制台可能会自动填写 close-form 标记，但您正在生成格式错误的 HTML 源代码。换句话说，你应该这样做：

  <%= form_tag({:controller => "foods", :action => "save_selected"}, method: "post") do %>
    <%= text_field_tag 'search_food_text_field', nil, data: { catcomplete_source: search_foods_path } %>
  <% end %>

对于自动完成的问题，您应该尝试使用类而不是 id（因为 id 必须是唯一的），然后确保在每个文本字段上调用自动完成。尝试像这样声明你的 text_field_tags：

  <%= text_field_tag 'search_food_text_field', nil, data: { catcomplete_source: search_foods_path }, class: 'auto-complete' %>

然后像这样调用你的 jQuery：

$( ".autocomplete" ).each(function() {
  $(this).catcomplete({
   source: $(this).data('catcomplete-source')
  });
});