在使用 jquery after() 创建的输入字段上自动完成

Question

我有一个实现自动完成功能的字段。这是我的代码：

<%= f.text_field :auteur_1, size: 100, class:"champs_auteur", data: {autocomplete_source: auteurs_enum_path} %>

这将创建以下 html：

<input size="100" class="champs_auteur ui-autocomplete-input" data-autocomplete-source="/auteurs/enum" name="biblio[auteur_1]" id="biblio_auteur_1" autocomplete="off" type="text">

这是在我的 javascript 中：

$(document).on('ready', function() {
  return $('.champs_auteur').autocomplete({
    source: $('.champs_auteur').data('autocomplete-source')
  });
});

一切正常。我正在使用 jquery after() 和 append() 创建输入字段，如下所示：

$(document).on('ready', function () {
    i = 2 ;
    $(".extra_auteur").click(function(){
        $('.premier_auteur').after('<div class="grid mbm"><div class="one-sixth"><label for="biblio_auteur">Auteur</label></div><input size="100" class="champs_auteur" data-autocomplete-source="/auteurs/enum" type="text" name="biblio[auteur_' + i++ + ']" id="biblio_auteur_1" /></div>');
        });
  });

这是缩小的代码（主要是 html）：

<div class="grid mbm">
    <div class="one-sixth">
        <label for="biblio_auteur">Auteur</label>
    </div>
    <input size="100" class="champs_auteur" data-autocomplete-source="/auteurs/enum" type="text" name="biblio[auteur_' + i++ + ']" id="biblio_auteur_1" />
</div>

这确实会使用id="biblio_auteur_2"（以及 3、4 等...）创建输入字段。

自动完成功能不适用于其他输入字段。我不明白为什么不。

Answer 1

这是因为您使用的是元素 #ID 而不是类名，如下所示：

$( "#aut_extra" )

而且#ID 始终是唯一的，因此仅适用于 1 项。你需要做的是让 jQuery 选择 CSS 元素类而不是 ID。

$( ".aut_extra" ) 

或任何类名。

但您必须确保当前 ID 为 aut_extra 的元素具有同名的 CSS 类。

<div class="aut_extra"....

Answer 2

Crashtor 是正确的，页面 ID 必须是唯一的才能正常运行。但是，您可能还有另一个问题。您在文档准备期间调用了自动完成功能，但是当您通过添加新字段来更改 dom 时，这些字段在自动完成功能初始化后就存在了。

尝试在每个追加后调用自动完成。

$('.extra_amatur:last').find('input[type=text]:last').autocomplete({
     source: $(this).data('autocomplete-source')
});

Answer 3

感谢您的帮助。两个错误都需要更正，第一个错误应该只使用类，第二个错误应该在另一个事件上使用自动完成，然后准备好文档。我点击了。

这是代码（如果这可以帮助某人）：

$(document).on('click', '.champs_2_auteur', function() {
    return $('.champs_2_auteur').autocomplete({
        source: $('.champs_2_auteur').data('autocomplete-source')
    });
});