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生成的，并且在生成时不能与自动完成初始化代码一起插入。在我们的例子中，自动完成适用于第一个插入元素，而不适用于第二个元素。我们的问题是为第二个元素和on进行自动完成初始化。

更新：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);
    */
});

jquery autocomplete仅为第一个动态插入元素初始化

2 个答案: