ApplePie ApplePie - 26 days ago 9
jQuery Question

autocomplete on dynamic created inputs

Can anyone help me and explain why the autocomplete did not work for the dynamic created input? Is there a way to do it with my code? I do have the jQuery cdn links in my html.

Javascript

var countries = ["Canada","Africa","Japan"];

function add_row()
{
$rowno=jQuery("#employee_table tr").length;
$rowno=$rowno+1;


jQuery("#employee_table tr:last").after(
"<tr id='row"+$rowno+"'>"+
"<td><input type='text' pattern='[A-Za-z\\s]+' name='fullname[]' placeholder='Full Name' required></td>"+
"<td><input type='text' id='listcountry' pattern='[A-Za-z\\s]+' name='country[]' placeholder='Country' required></td>"+
"<td><input type='file' name='resume[]' placeholder='Resume'></td>"+

"<td><input list='degree' name='degree'>"+
"<datalist id='degree'>"+
"<option value='High School'>"+
"<option value='Undergraduate'>"+
"<option value='Master'>"+
"<option value='PHD'>"+
"</datalist></td>"+

"<td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td>"+
"</tr>");

jQuery( "#listcountry" ).autocomplete({
source: countries
});
}


I have added my html code below as well.

HTML

<div id="wrapper">
<div id="form_div">
<form enctype="multipart/form-data" method="post" name="registration" id="newquizform">
<center>
<table id="employee_table" align=center>
<tr id="row1">
<td><input type="text" pattern="[A-Za-z\s]+" title="Digit Prohibited" name="fullname[]" placeholder="Full Name" required></td>
<td><input id="listcountry" type="text" pattern="[A-Za-z\s]+" title="Digit Prohibited" name="country[]" placeholder="Country" required></td>
<td><input type="file" name="resume[]" placeholder="Resume"></td>
<td>
<input list="degree" name="degree">
<datalist id="degree">
<option value="High School">
<option value="Undergraduate">
<option value="Master">
<option value="PHD">
</datalist>
</td>
</tr>
</table>
</center><br>

<input type="button" onclick="add_row();" value="ADD ROW">
<input type="submit" name="submitbutton" value="SUBMIT" id="submitbutton">
</form>
</div>
</div>

Answer Source

replace ID with Class in the input element like this, it should work. And don't forget the initialization of the first one.

var countries = ["Canada","Africa","Japan"];
jQuery( ".listcountry" ).autocomplete({
        source: countries
        });

    function add_row()
    {
        $rowno=jQuery("#employee_table tr").length;
        $rowno=$rowno+1;


    jQuery("#employee_table tr:last").after(
        "<tr id='row"+$rowno+"'>"+
            "<td><input type='text' pattern='[A-Za-z\\s]+' name='fullname[]' placeholder='Full Name' required></td>"+
            "<td><input type='text' class='listcountry' pattern='[A-Za-z\\s]+' name='country[]' placeholder='Country' required></td>"+
            "<td><input type='file' name='resume[]' placeholder='Resume'></td>"+

                      "<td><input list='degree' name='degree'>"+
                      "<datalist id='degree'>"+
                        "<option value='High School'>"+
                        "<option value='Undergraduate'>"+
                        "<option value='Master'>"+
                        "<option value='PHD'>"+
                        "</datalist></td>"+

            "<td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td>"+
        "</tr>");

    jQuery( ".listcountry" ).autocomplete({
        source: countries
        });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="wrapper">
    <div id="form_div">
     <form  enctype="multipart/form-data" method="post" name="registration" id="newquizform">
     <center>
      <table id="employee_table" align=center>
       <tr id="row1">
        <td><input type="text" pattern="[A-Za-z\s]+" title="Digit Prohibited" name="fullname[]" placeholder="Full Name" required></td>
        <td><input class="listcountry" type="text" pattern="[A-Za-z\s]+" title="Digit Prohibited" name="country[]" placeholder="Country" required></td>
        <td><input type="file" name="resume[]" placeholder="Resume"></td>
        <td>    
              <input list="degree" name="degree">
              <datalist id="degree">
                <option value="High School">
                <option value="Undergraduate">
                <option value="Master">
                <option value="PHD">
              </datalist>
        </td>
       </tr>
      </table>
      </center><br>

      <input type="button" onclick="add_row();" value="ADD ROW">
      <input type="submit" name="submitbutton" value="SUBMIT" id="submitbutton">
     </form>
    </div>
</div>