具有自动完成功能的动态文本框答案

【问题标题】：Dynamic text boxes with autocomplete functionality具有自动完成功能的动态文本框
【发布时间】：2023-03-16 19:25:01
【问题描述】：

我无法让动态文本框包含自动完成操作。类似的帖子：jquery auto complete for dynamically generated textboxes 有我想要的想法，但由于我仍在学习为此所需的语言，我不明白如何整合此解决方案。我可能完全误认为 id 标签部分是问题所在。任何帮助表示赞赏。我感觉自动完成在页面加载后不会运行，但正如我之前所说，我不确定如何解决这个问题。谢谢大家。

目前的自动补全功能：

<script>
  $(function bindAutoComplete(classname) {
      var availableTags =[]; //output for autocomplete
      var firstNameArray=[]; //pull first names from database
      var lastNameArray=[];  //pull last names from database
      var combinationFirstName=[]; //seperate array for manipulation and combination
      var combinationLastName=[];  //seperate array for manipulation and combination

      //pulling the data
      firstNameArray="${fullList?.firstName}"; 
      lastNameArray="${fullList?.lastName}";

      //Strip the leading [ and all ,'s from the array still need to remove ]
      combinationFirstName=firstNameArray.split(',');
      combinationFirstName[0]="";
      combinationLastName=lastNameArray.split(',');
      combinationLastName[0]="";

      //combine the two lists
      for (i = 0; i < ${fullList?.firstName?.size()}; i++) { 
          availableTags.push(combinationFirstName[i] + combinationLastName[i])
        }

    $(tags).autocomplete({
      source: availableTags
    });
  });
</script>

目前的动态框：

<script> $(document).ready(function() {
    var max_fields      = 20; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment   
            $(wrapper).append('<div><g:textField name="firstName" id="tags"/><a href="#" class="remove_field"><span> Remove</a></div>');
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
    });
  </script>

HTML 也

<div class="input_fields_wrap">
  <button class="add_field_button">Add More Employees</button>
  <div><g:textField name="firstName" id="tags"/></div>
</div>

【问题讨论】：

据我所知，$(tags) 如果您没有将标签设置为字符串变量，则甚至不是有效的选择器。也许你的意思是$('#tags')？
我认为代码最初是这样，但我认为这与我认为的 ID 标签问题有关。我只是尝试将其更改回来，它仍然会影响主框，但不会影响动态框。
您不能拥有超过 1 个具有相同 id 的元素
这就是我试图解决的问题，但我对知识的掌握太差了，我认为 # 使它成为一个 id 标签。你能想办法改变它吗？
# 只是 id 选择器的前缀。您应该向您的文本字段添加一个类，例如 class='autocomplete'，然后使用类选择器：$(".autocomplete").autocomplete()

标签： javascript jquery

【解决方案1】：

Jquery 插件通常会在您调用它们时进行初始化，因此如果您初始化扩展并将其应用于文档加载时的某些 dom 元素，则在 dom 加载后动态添加的同一选择器的所有元素将不会加载插件在他们中。所以你需要自己做。在您的情况下，这是一个简单的情况，您正在单击功能上添加新元素，因此只需在将元素添加到 dom 后在元素上运行插件：

$(wrapper).append(...);
$(".autocomplete").autocomplete()

不过，这样做会更好：

var toAdd = $('<div><g:textField name="firstName" class="autocomplete" id="tags"/><a href="#" class="remove_field"><span> Remove</a></div>')

 $(wrapper).append(toAdd);
 toAdd.autocomplete()

【讨论】：