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')
  });
});

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

1 个答案: