iam正在从事codeiginter项目,我有一个购买表格,用户可以使用自动完成功能在输入文本中搜索备件项目,这是可行的,但是在我按添加按钮以查找新项目之后,...搜索新项目...新行无法像第一个一样在内部搜索。

我希望用户在搜索后选择项目,然后添加新行以搜索另一项以添加它

搜索代码

<script type="text/javascript">
$(document).ready(function(){

 // Initialize

 $("#itemcode").autocomplete({
    source: function( request, response ) {
      // Fetch data
      $.ajax({
        url: 'spareList',
        type: 'post',
        dataType: "json",
        data: {
          search: request.term
        },
        success: function( data ) {
              response( data );


        //=========================
        }
      });
    },
    select: function (event, ui) {
      // Set selection

      $('#itemcode').val(ui.item.label); // display the selected text
      $('#itemname').val(ui.item.value); // save selected id to input
      return false;


    }
  });

});




添加新行的代码



 <script type="text/javascript">
$(document).ready(function(){
 var count = 1;
 $('#add').click(function(){

  count = count + 1;
  var html_code = "<tr id='row"+count+"'>";
   html_code += "<td contenteditable='false' class='item_code' ><input type='text' class='form-control' placeholder='item code' id='itemcode' /></td>";
   html_code += "<td contenteditable='false' class='item_name'  ><input type='text' class='form-control' placeholder='item name' id='itemname'/></td>";
   html_code += "<td contenteditable='false' class='item_quantity'><input type='text' class='form-control' placeholder='quantity' /></td>";
   html_code += "<td contenteditable='false' class='item_price' ><input type='text' class='form-control' placeholder='price' /></td>";
   html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";
   html_code += "</tr>";
   $('#crud_table').append(html_code);

 });
 });

 $(document).on('click', '.remove', function(){
  var delete_row = $(this).data("row");
  $('#' + delete_row).remove();
 });
 </script>





#it​​emcode输入以进行搜索



 <!-- Spare parts items -->
<div class="form-group">
<div class="panel panel-success">
<div class="panel-heading"><b>Spare Parts</b></div>
<div class="panel-body">
  <div class="form-group row">

    <table class="table table-bordered" id="crud_table">
     <tr>
      <th class="col-xs-2" >Item Code</th>
      <th class="col-xs-6" >Item Name</th>
      <th class="col-xs-2" >Quantity</th>
      <th class="col-xs-2" >Price</th>
      <th class="col-xs-2" ></th>
     </tr>
     <tr>
      <td  class="item_code"><input type="text" class="form-control" placeholder="item code " id="itemcode" /></td>

      <td  class="item_name"><input type="text" class="form-control" placeholder="item name" id="itemname" /></td>
      <td  class="item_quantity"><input type="text" class="form-control" placeholder="quantity" /></td>
      <td  class="item_price"><input type="text" class="form-control" placeholder="price" /></td>
      <td></td>
     </tr>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 Add
</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" class="btn btn-info">Save</button>
    </div>
    <br />
    <div id="inserted_item_data"></div>
   </div>
  

最佳答案

您可能需要在一个文档中准备好该功能,并确保使用class而不是ID。这是您可以尝试使用JSFIDDLE的以下代码:

$(document).ready(function() {
    // Initialize
    someParts();

    function someParts() {
        $(".form-control").autocomplete({
            source: function(request, response) {
                // Fetch data
                $.ajax({
                    url: 'spareList',
                    type: 'post',
                    dataType: "json",
                    data: {
                        search: request.term
                    },
                    success: function(data) {
                        response(data);
                        //=========================
                    }
                });
            },
            select: function(event, ui) {
                // Set selection

                $('#itemcode').val(ui.item.label); // display the selected text
                $('#itemname').val(ui.item.value); // save selected id to input
                return false;


            }
        });
    }
    var count = 1;
    $('#add').click(function() {
        count = count + 1;
        var html_code = "<tr id='row" + count + "'>";
        html_code += "<td contenteditable='false' class='item_code' ><input type='text' class='form-control' placeholder='item code' id='itemcode' /></td>";
        html_code += "<td contenteditable='false' class='item_name'  ><input type='text' class='form-control' placeholder='item name' id='itemname'/></td>";
        html_code += "<td contenteditable='false' class='item_quantity'><input type='text' class='form-control' placeholder='quantity' /></td>";
        html_code += "<td contenteditable='false' class='item_price' ><input type='text' class='form-control' placeholder='price' /></td>";
        html_code += "<td><button type='button' name='remove' data-row='row" + count + "' class='btn btn-danger btn-xs remove'>-</button></td>";
        html_code += "</tr>";
        $('#crud_table').append(html_code);
        someParts();
    });
});

$(document).on('click', '.remove', function() {
    var delete_row = $(this).data("row");
    $('#' + delete_row).remove();
});

10-05 20:29
查看更多