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

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

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

感谢您的帮助。

Answer 1

您的 JQuery 应如下所示（假设您的嵌套字段具有 ID 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 中交叉发布了此内容，因此我将在此处复制我的回答给您。

您的 select 离子过滤器 jquery 似乎有误。你写 on("focus","programline_exercise_name" 和 $('programline_exercise_name') 会去寻找具有该名称的 html 元素。喜欢 $('p') 将 select 所有段落。我假设您想要 select 带有 id 或 class programline_exercise_name 的元素？对于动态添加的字段，您肯定会使用 class，但是您的 jquery 代码段也会是错误的。

因此，如果您将想要的 class-名称添加到字段

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

未测试，所以让我解释一下：当使用 class .programline_exercise_name 在任何文本字段上触发焦点事件时，只为引发该事件的元素设置自动完成。

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

Autocompletion in a nested form text field

javascript

ruby-on-rails

cocoon-gem