jQuery自动完成仅针对第一个动态插入的元素初始化

Question

这是我们为动态插入的元素初始化自动完成（jQuery）的方式：

$(function() {
  setTimeout(function(){
    $("[id^='requisition_material_items_attributes_'][id$='_item_name_autocomplete']").each(function (){
       $(this).autocomplete({
        minLength: 1,
        source: $(this).data('autocomplete-source'),
        select: function(event, ui) {
            $(this).val(ui.item.value);
        }
      });
    });
  }, 5000);
});

这里setTimeout（5 秒延迟）允许对第一个动态插入的元素进行自动完成初始化。但是，初始化不适用于第二个插入的元素，并且自动完成不适用于第二个元素。如何修复上面的 JS 代码以使其适用于第二个元素及其他元素？

更新

jQuery autocomplete for dynamically created inputs（所谓的重复案例）提供的解决方案在这里不起作用，因为它是针对不同的问题。在重复的情况下，通过在使用 JavaScript 生成新元素时添加自动完成的初始化来解决问题。在我们的例子中，新元素是由 Rails 生成的，并且在生成时不能使用自动完成初始化代码插入其中。在我们的例子中，自动完成适用于第一个插入的元素，而不适用于第二个元素。我们的问题是对第二个元素进行自动完成初始化。

更新

item_name_autocomplete 的 Rails 视图：

<%= f.input :item_name_autocomplete, :label => t("Item Name"), :input_html => { data: {autocomplete_source: SUBURI + base_materialx.autocomplete_parts_path}},:placeholder => t("Enter Part Name Keyword"), :required => true  %>

Answer 1

setTimeout 在指定的延迟后调用该函数，它没有设置间隔，您可以使用setInterval 函数，但在这种情况下这是一个糟糕的主意。您应该在生成目标元素时选择它们，然后在这些特定元素上调用该方法。没有可靠/好的方法来处理这个问题。

Answer 2

您的脚本需要从 setTimeout 更改提取函数回调

我用下面的例子说明了你的情况，可能有助于得到一个想法

function registerAutoComplete(elements) {
    return elements.each(function () {
        $(this).autocomplete({
            minLength: 1,
            source: $(this).data('autocomplete-source'),
            select: function (event, ui) {
                $(this).val(ui.item.value);
            }
        });
    });
}

//if you create new autocomplete element with some function 
function createAutocompleteElement() {
    var $control = $('<input />').data('autocomplete-source', [
        "Add the Data Source object here", "Value 1", "Source Value 2", "Source Value 3"]);

    return registerAutoComplete($control);
}

$(function () {
    //this below function sufficient to register autocomplete with specified selector
    registerAutoComplete($("[id^='requisition_material_items_attributes_'][id$='_item_name_autocomplete']"));

    /*// below setTimeout delay call back not required as it runs after dom ready.
    setTimeout(function () {
        registerAutoComplete($("[id^='requisition_material_items_attributes_'][id$='_item_name_autocomplete']"));
    }, 5000);
    */
});