how can i append auto search class in script

Question

when i am clicking on first textbox auto autocomplete function is working.but after inserting another textbox in script autocomplete function is not working.So please suggest me how to append autocomplete class in script.

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>

script:

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

Possible duplicate of [AutoComplete in jQuery with dynamically added elements](http://stackoverflow.com/questions/33410824/autocomplete-in-jquery-with-dynamically-added-elements) — cracker, Mar 16 '16 at 05:09
find the solution over http://stackoverflow.com/questions/33410824/autocomplete-in-jquery-with-dynamically-added-elements — cracker, Mar 16 '16 at 05:09

score 0 · Answer 1 · answered Mar 16 '16 at 05:10

just you call autocomplete script function after insert new row. Add this function "autocomplete()" to end of "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>

how can i append auto search class in script

1 Answers1