javascript - 如何为动态创建的输入框应用自动完成

我有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>

有人可以告诉我我在做什么错，谢谢

最佳答案

尝试这个：

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
}

关于javascript - 如何为动态创建的输入框应用自动完成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36843138/