0

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

<%= 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 等...）创建了输入字段。

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

4

3 回答 3

1

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

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

$('.extra_amatur:last').find('input[type=text]:last').autocomplete({
     source: $(this).data('autocomplete-source')
});
于 2017-01-15T20:35:51.917 回答
1

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

$( "#aut_extra" )

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

$( ".aut_extra" )

或任何类名。

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

<div class="aut_extra"....
于 2017-01-15T19:33:07.237 回答
0

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

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

$(document).on('click', '.champs_2_auteur', function() {
    return $('.champs_2_auteur').autocomplete({
        source: $('.champs_2_auteur').data('autocomplete-source')
    });
});
于 2017-01-15T21:58:01.823 回答