如何申請自動完成動態創建的輸入框

Question

我有5個輸入框添加產品，如果用戶想添加更多的產品，他可以點擊添加更多的產品和5個新的動態創建的文本框將出現。我的問題是我我無法將自動填寫到動態輸入框中，但無法將自動完成添加到我的靜態輸入框中。

我的HTML代碼

<div class="pro" id="dynamicInput"> 
<div>Product Name 1 
<input style="border:2px solid #7f9db9" name="product_1" id="in_pc_item_moq_unit_type1" class="ui-autocomplete-input" maxlength="100" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> 
<input type="hidden" id="in_pc_item_moq_1"> 
</div> 
<div>Product Name 2 

<input style="border:2px solid #7f9db9" name="product_2" id="in_pc_item_moq_unit_type2" class="ui-autocomplete-input" maxlength="100" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> 
</div> 
<div>Product Name 3 
<input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type3" maxlength="100" name="product_3" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> 
</div> 
<div>Product Name 4 

    <input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type4" maxlength="100" name="product_4" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> 
</div> 
<div>Product Name 5 

    <input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type5" maxlength="100" name="product_5" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> 
</div> 
      </div> 
<div class="ta m15"> 
    <input name="gluserid" id="glid" value="7171786" type="hidden">  <input type="button" value="Add more product" onclick="addInput('dynamicInput');"> 
    <input type="submit" value="submit" name="submit"> 


     </div> 

我的Java腳本代碼動態添加輸入框是

<script type="text/javascript"> 

     var counter = 1; 
     var limit = 4; 
     var num=6; 
function addInput(divName){ 
    if (counter == limit) { 
      alert("You have reached the limit of adding " + counter + " inputs"); 
    } 
    else { 
     for(var i=1;i<=5;i++) 
     { 
      var newdiv = document.createElement('div'); 
      newdiv.innerHTML = "Product Name " + (num) + "<input style='border:2px solid #7f9db9' class='ui-autocomplete-input' id='in_pc_item_moq_unit_type" + num + "' maxlength='100' type='text' name='product_" + num + "' placeholder='Enter your product name'>"; 
      document.getElementById(divName).appendChild(newdiv); 
      num++ 
     } 
    counter++; 
    } 
} 

    </script> 

我的自動腳本的建議是

<script type="text/javascript"> 

    function auto_suggest(id) 
    { 
     if(typeof(Suggester)!="undefined") 
     { 
      sugg=new Suggester({"element":id,"onSelect":selecttext,"type":"mcat","placeholder":"Enter your product name","classPlaceholder":"ui-placeholder-input",minStringLengthToFetchSuggestion:1}); 
     }else 
     { 
      setTimeout(function(){ 
      auto_suggest()},50); 
     } 
    } 
     auto_suggest('in_pc_item_moq_unit_type1'); 
     auto_suggest('in_pc_item_moq_unit_type2'); 
     auto_suggest('in_pc_item_moq_unit_type3'); 
     auto_suggest('in_pc_item_moq_unit_type4'); 
     auto_suggest('in_pc_item_moq_unit_type5'); 
     auto_suggest('in_pc_item_moq_unit_type6'); 
     auto_suggest('in_pc_item_moq_unit_type7'); 
     auto_suggest('in_pc_item_moq_unit_type8'); 
     auto_suggest('in_pc_item_moq_unit_type9'); 
     auto_suggest('in_pc_item_moq_unit_type10'); 
     auto_suggest('in_pc_item_moq_unit_type11'); 
     auto_suggest('in_pc_item_moq_unit_type12'); 
     auto_suggest('in_pc_item_moq_unit_type13'); 
     auto_suggest('in_pc_item_moq_unit_type14'); 
     auto_suggest('in_pc_item_moq_unit_type15'); 
     auto_suggest('in_pc_item_moq_unit_type16'); 
     auto_suggest('in_pc_item_moq_unit_type17'); 
     auto_suggest('in_pc_item_moq_unit_type18'); 
     auto_suggest('in_pc_item_moq_unit_type19'); 
     auto_suggest('in_pc_item_moq_unit_type20'); 



    function selecttext(event, ui) 
    { 
     this.value = ui.item.value; 



    } 

</script> 

誰能告訴我，我什麼做錯了，提前致謝

Answer 1

試試這個：

for(var i=1;i<=5;i++) 
{ 
    var newdiv = document.createElement('div'); 
    newdiv.innerHTML = "Product Name " + (num) + "<input style='border:2px solid #7f9db9' class='ui-autocomplete-input' id='in_pc_item_moq_unit_type" + num + "' maxlength='100' type='text' name='product_" + num + "' placeholder='Enter your product name'>"; 
    document.getElementById(divName).appendChild(newdiv); 
    num++; 
    auto_suggest('in_pc_item_moq_unit_type' + num); // apply autocomplete after element creation 
}