Question

任何人都可以帮助我解释为什么自动完成功能不适用于动态创建的输入吗？有没有办法用我的代码做到这一点？我的html中有jQuery cdn链接。

的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
        });
}

我也在下面添加了我的HTML代码的 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 1

将 ID 替换为输入元素中的类，就可以了。并且不要忘记第一个的初始化。

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>

在动态创建的输入上自动完成

1 个答案: