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>
#itemcode输入以进行搜索
<!-- 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();
});