如何为动态生成的文本框添加实时搜索

Question

我已经开发了表，它可以动态添加行。

行包含具有不同ID的文本框，如何为动态生成的text-box添加实时搜索工具...... HTML注释标记中也提供了PHP代码

＆＃13;

＆＃13;

function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;

  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.id = 'text' + rowCount + '';
  element1.name = "chkbox[]";
  cell1.appendChild(element1);

  //var cell2 = row.insertCell(1);
  //cell2.innerHTML = rowCount + 1;

  var cell2 = row.insertCell(1);
  var element2 = document.createElement("input");
  element2.type = "text";
  element2.className = "form-control";
  element2.title = "Item-name";
  element2.id = 'item-name' + rowCount + '';
  element2.name = "item-name[]";
  cell2.appendChild(element2);

  var cell3 = row.insertCell(2);
  var element3 = document.createElement("input");
  element3.type = "text";
  element3.className = "form-control";
  element3.title = "Item-name";
  element3.id = 'qty' + rowCount + '';
  element3.name = "qty[]";
  cell3.appendChild(element3);

  var cell4 = row.insertCell(3);
  var element4 = document.createElement("input");
  element4.type = "text";
  element4.className = "form-control";
  element4.title = "Item-name";
  element4.id = 'unit-price-' + rowCount + '';
  element4.name = "unit-price[]";
  cell4.appendChild(element4);

  var cell5 = row.insertCell(4);
  var element5 = document.createElement("input");
  element5.type = "text";
  element5.className = "form-control";
  element5.title = "Item-name";
  element5.id = 'toatal-' + rowCount + '';
  element5.name = "total-[]";
  cell5.appendChild(element5);



}

＆＃13;

<table class="table table-striped table-hover" style="background-color:white; text-align: center;" id="item-table">
  <tr>
    <td></td>
    <td> </td>
    <td></td>
    <td><input type="button" value="Add Row" id="btn-addrow" onclick="addRow('item-table');idincrement;" class="btn-success form-control" /></td>
    <td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>

  </tr>

  <tr>
    <th></th>
    <th style="text-align: center">Item Name</th>
    <th style="text-align: center">Quantity</th>
    <th style="text-align: center">unit Price</th>
    <th style="text-align: center">total</th>

  </tr>

  <tr>
    <td><input type="checkbox"></td>
    <td class="col-md-4">
      <input type="text" id="it_re_qty" name="total[]" class="form-control col-md-1">

    </td>
    <td><input type="text" name="it_re_qty[]" class="form-control"></td>
    <td><input type="text" id="y" name="unit_price[]" class="form-control"></td>
    <td><input type="text" id="it_re_qty" name="total[]" class="form-control col-md-1"></td>
    <!--<td> <input type="button"  value="Add Row" id="btn-addrow" onclick="addRow('item-table');idincrement;" class="btn-success form-control"/></td>
                                            <td><input type="button" value="Remove" onclick="deleteRow('item-table');" class="form-control btn-danger" /></td>
                                        -->
  </tr>

</table>

<!--<?php
                                                    include ('../svr/connection.php');
                                                    $sql = "SELECT * FROM User";
                                                    $result = mysqli_query($conn, $sql);
                                                    while ($row = mysqli_fetch_array($result)) {
                                                        echo '<option value=' . $row['user_name'] . '>' . $row['user_name'] . '</option>';
                                                    }
                                                    ?> -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于它是动态添加的行，因此您需要做的输入字段采用了如下所示的不同方法。

$('body').on('keyup', 'input.myInputForSearch', function(){
  $.post(ajaxEndPoint, {keyword: $(this).val()}, function(response){
    //now suppose we have put a division to contain the resul with class .searchResults
    $('.searchResults').slideDown().html(response);//assuming response as a view itself otherwise you may need an extra js loop through the json obj if it is.
  });
});