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" )

或任何班级名称。

但是你必须确保当前具有aut_extra ID的元素具有一个具有相同名称的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')
    });
});

使用jquery创建的输入字段上的自动完成（）

3 个答案: