我如何在脚本中附加自动搜索类

Question

当我点击第一个文本框时 auto 自动完成功能正在工作。但是在脚本中插入另一个文本框后自动完成功能不起作用。所以请建议我如何在脚本中附加自动完成类。

html:

    <form  id="smart-form-register" class="smart-form client-form" method="post" enctype="multipart/form-data">
<fieldset>
 <section>
<label class="input"> <i class="icon-append fa fa-user"></i>
 <input type="text"   name="product_name" placeholder="product Name">
  <b class="tooltip tooltip-bottom-right">Needed to enter product Name</b> </label>
    </section>
<section>
    <table style="width:100%;">
  <tr>
  <th style="padding-bottom:10px;">Material Name</th>
  <th style="padding-bottom:10px;">Material Quantity</th>
    </tr>
   <tr>
 <td><input name="last[]" class="auto"  id="last[0]" size="40"></td>
 <td><input name="first[]" id="first[0]" size="40"></td> 
   </tr>
 </table>
 </section>
 <section>
  <span class="glyphicon glyphicon-plus" style="margin-left:580px;" value="Add" onclick="insert()"></span>

 </section>

</fieldset>

<input type="submit" name="submit" value="Register" class="btn btn-primary">

 </form>

脚本：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>    
<script type="text/javascript">
$(function() {

    //autocomplete
    $(".auto").autocomplete({
        source: "search1.php",
        minLength: 1
    });                

});
</script>




 <script>
    var i=0
    var j=0
    function insert()
    {
    last=document.getElementById("last["+i+"]")
    i++
    first=document.getElementById("first["+j+"]")
    j++
    last.insertAdjacentHTML("AfterEnd", '<br><input class="auto" name="last[]" id="last['+i+']" size="40">') 
    first.insertAdjacentHTML("AfterEnd", '<br><input name="first[]" id="first['+j+']" size="40"<br>') 
    }

    </script>

Answer 1

只需在插入新行后调用自动完成脚本函数。 将此函数“autocomplete()”添加到“insertAdjacentHTML()”的末尾

<script>
    var i=0
    var j=0
    function insert()
    {
    last=document.getElementById("last["+i+"]")
    i++
    first=document.getElementById("first["+j+"]")
    j++
    last.insertAdjacentHTML("AfterEnd", '<br><input class="auto" name="last[]" id="last['+i+']" size="40">').autocomplete(); 
    first.insertAdjacentHTML("AfterEnd", '<br><input name="first[]" id="first['+j+']" size="40"<br>').autocomplete();
    }

    </script>