Динамические текстовые поля с функциональностью автозаполнения

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 при загрузке документа, все элементы nts одного и того же селектора, добавленного динамически после загрузки dom, не будет загружен в них плагин. Поэтому вам нужно сделать это самостоятельно. В вашем случае, подмигнули простой случай, вы добавляете новые элементы на на функции мыши, так просто запустить плагин на элементы после добавления их Dóm:

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