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

jquery autocomplete for dynamically inserted elements with unknown id

本文关键字：id 动态 插入 元素 未知 jquery      更新时间：2023-09-26

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

$(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);
        },
    });
});

当用户选择零件名称时，上面的自动补全将填充零件名称。现在，我们想将自动完成添加到动态插入的元素中。以下是我们需要考虑的几件事：

  1. 元素id在插入之前是未知的
  2. 在同一表单上可以插入多个元素
  3. 动态插入元素的id总是以"bom"开头，以"partnameautocomplete"结尾。自动完成需要将id与这种类型的模式相匹配
  4. ID中的数字因元素而异。例如第一次插入的id可以是CCD_，第二次插入的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));
}

好吧，在插入元素后，您可以执行以下操作：

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

通过

在创建时添加它更容易

通过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
}
相关文章：