Question

我们在静态表单上有自动完成功能：

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

上面的自动填充功能会在用户选择一个时填写部件名称。现在我们想为动态插入的元素添加自动完成功能。以下是我们需要考虑的一些事项：

元素ID在插入后才知道
可能在同一表单上插入了多个元素。
动态插入元素的ID始终以＆＃39; bom _＆＃39;并以＆＃39; _part_name_autocomplete＆＃39;结尾。自动完成需要将id与此类模式匹配。
ids中的数字因元素而异。例如，第一次插入的ID可能是'bom_123456789_part_name_autocomplete'，第二次插入的ID可以是'bom_123456987_part_name_autocomplete'

我们发现的在线示例都没有未知的元素ID。是否可以对ID未知的动态元素进行自动完成？如果可以做到，将非常感谢一个例子。

更新：这是创建元素的rails代码：

    def link_to_add_fields(name, f, association)
      new_object = f.object.class.reflect_on_association(association).klass.new
      fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
        render :partial => association.to_s, :locals => {:f => builder, :i_id => 0} 
      end
      link_to_function(name, "add_fields(this, \"#{association}\", \"#{j fields}\")")
    end

以下是add_fields（）的javascript：

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g");
  $(link).parent().before(content.replace(regexp, new_id));
}

Answer 1

好吧，插入元素后，你可以这样做：

$('[id^=bom_][id$=_part_name_autocomplete]').each(function(){
    $(this).autocomplete({ // ...
})

通过

更容易将其添加到创作中

Answer 2

按ID引用元素不是选择它的唯一方法。

您可以在创建元素时添加自动填充：

function create_element(data) {
    var field = $("<input/>")
    field.data('autocomplete-source', data)
    $(field).autocomplete({
        minLength: 1,
        source: $(field).data('autocomplete-source'),  
        select: function(event, ui) {
            $(this).val(ui.item.value);
        },
    });
    return field
}

jquery自动完成，用于动态插入具有未知id的元素

2 个答案: