代码之家  ›  专栏  ›  技术社区  ›  ApplePie

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

  •  1
  • ApplePie  · 技术社区  · 8 年前

    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

    <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>
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   Temani Afif    8 年前

    代替 具有 在这样的输入元素中,它应该可以工作。不要忘记第一个的初始化。

    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>