Question

我正在使用rails 5，我想自动填充一个嵌套形式的文本字段。嵌套表单是通过cocoon生成的。当我尝试在父表单中使用自动完成功能时，它工作正常。然而，似乎我的javascript不适用于嵌套表单。

这是嵌套表单的模型文件

class Programline < ApplicationRecord
belongs_to :program, inverse_of: :programlines
belongs_to :exercise


def exercise_name
 exercise.try(:exe_desc)
end

def exercise_name=(exe_desc)
 self.exercise = Exercise.find_by_exe_desc(exe_desc) if 
 exe_desc.present?
end



end

这是嵌套表单中的文本字段。

 <%= f.text_field :exercise_name, data: {autocomplete_source: Exercise.order(:exe_desc).map(&:exe_desc)} ,class: "form-control", placeholder: "Exercise", autofocus: true %>

这是我的javascript文件。

     jQuery
     $(function() {
      $(document).on("focus","programline_exercise_name", function() {
        $('programline_exercise_name').autocomplete({
            source: $('programline_exercise_name').data('autocomplete- source')
              }); 
                });
                  })

当我填写表单时，它工作正常，插入数据和建立关系没有任何问题。但它不会自动查找运动表中的数据。

感谢您的帮助。

Answer 1

您的JQuery应如下所示（假设您的嵌套字段具有标识programline_exercise_name）：

$(function() {
 $(document).on("focus","#programline_exercise_name", function() {
   $('#programline_exercise_name').autocomplete({
       source: $('#programline_exercise_name').data('autocomplete- source')
    }); 
 });
});

Answer 2

你在cocoon issues交叉发布了这个，所以我会在这里复制你的答案。

您对jquery的选择过滤器似乎有误。您编写on("focus","programline_exercise_name"和$('programline_exercise_name')来查找具有该名称的html元素。像$('p')一样会选择所有段落。我假设您要选择ID为programline_exercise_name的元素？对于动态添加的字段，你肯定会使用一个类，但是你的jquery片段也会出错。

因此，如果您将所需的类名添加到字段

<%= f.text_field :exercise_name, data: { autocomplete_source: Exercise.order(:exe_desc).map(&:exe_desc)},
      class: "form-control programline_exercise_name", 
      placeholder: "Exercise", 
      autofocus: true %>

然后你需要像

这样的东西

$(document).on("focus", ".programline_exercise_name", function() {
  var _this = $(this); 
  _this.autocomplete({
    source: _this.data('autocomplete- source')
  }); 
});

未经测试，请让我解释一下：当在类.programline_exercise_name的任何文本字段上触发焦点事件时，只需为导致该事件的元素设置自动完成。

嵌套表单文本字段中的自动完成

2 个答案: