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
}

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

1 个答案: