Question

我无法使动态文本框包含自动完成操作。类似的帖子：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>

Answer 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()

具有自动填充功能的动态文本框

1 个答案: