JQuery autocomplete() 仅适用于 table 的第一行
JQuery autocomplete() works only in first row of table
自动完成 jQuery UI 仅适用于 table 的第一行。
我正在使用 Bootstrap 上的自动完成 jQuery UI 处理药房搜索引擎表单,问题是自动完成仅适用于第一行。当我单击添加按钮时,它会创建一个新行,但在新行中它不起作用。
我的 jQuery 语法如下:
$("#itemSearch").autocomplete({
source: "{{ route('autoCompSearch') }}",
minLength:3,
select: function(key, value){
console.log(key, value);
},
});
我的 addRow() 如下;
$('#journalRows').on('keydown', '#addRow',function(event){
// alert('you are here...');
count++;
dynamic_field(count);
return true;
}
我的 dynamic_filed(count) 函数是;
function dynamic_field(number)
{
// New Function to add New Row in Journal
var html = '';
html += '<tr class="options" name="line_items">'
html += '<td width="5%"><input type="text" id="checkbox. $user->id ." name="id[]" class="form-control" value="" disabled=""></td>'
html += '<td width="15%"><input type="text" name="barcode_id[]" id="barcodeSearch" class="form-control"></td>'
html += '<td width="30%"><input type="text" name="item_id[]" id="itemSearch" class="form-control select-product"></td>'
html += '<td width="5%"><input type="text" name="qty[]" value="1" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
html += '<td width="10%"><input type="text" id="sal_price" value="1" name="sal_price[]" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
html += '<td width="5%"><input type="text" name="discPer[]" class="form-control" value="0" placeholder="Discount percentage..." onkeyup="InvoiceCalculation()"></td>'
html += '<td width="15%"><input type="text" id="totUnitAmount" name="totUnitAmount[]" class="form-control form-control-sm" value="0"></td>'
html += '<td><input type="button" id="addRow" name="addRow[]" class="form-control btn btn-success" value="+"></td>'
html += '<td><input type="button" id="removeRow" name="removeRow[]" class="form-control btn btn-danger" value="-"></td>';
html += '</tr>';
$('#journalRows').append(html);
};
这是有效的,但只有自动完成选项在第二行和以后的行中不起作用.....
对于新行,您需要更改自动完成字段的 ID。每个自动完成字段都应该有一个唯一的 ID:
$("#itemSearch").autocomplete({
source: "{{ route('autoCompSearch') }}",
minLength:3,
select: function(key, value){
console.log(key, value);
},
});
$("#itemSearch1").autocomplete({
source: "{{ route('autoCompSearch') }}",
minLength:3,
select: function(key, value){
console.log(key, value);
},
});
此外,您还需要在字段创建后初始化自动完成模块,否则它将不会出现在 DOM 中,并且 jQuery 将无法用于该字段
更新:
按如下方式更改您的 dynamic_field
函数:
function dynamic_field(number)
{
// New Function to add New Row in Journal
var html = '';
html += '<tr class="options" name="line_items">'
html += '<td width="5%"><input type="text" id="checkbox. $user->id ." name="id[]" class="form-control" value="" disabled=""></td>'
html += '<td width="15%"><input type="text" name="barcode_id[]" id="barcodeSearch" class="form-control"></td>'
html += '<td width="30%"><input type="text" name="item_id[]" id="itemSearch-'+number+'" class="form-control select-product"></td>'
html += '<td width="5%"><input type="text" name="qty[]" value="1" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
html += '<td width="10%"><input type="text" id="sal_price" value="1" name="sal_price[]" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
html += '<td width="5%"><input type="text" name="discPer[]" class="form-control" value="0" placeholder="Discount percentage..." onkeyup="InvoiceCalculation()"></td>'
html += '<td width="15%"><input type="text" id="totUnitAmount" name="totUnitAmount[]" class="form-control form-control-sm" value="0"></td>'
html += '<td><input type="button" id="addRow" name="addRow[]" class="form-control btn btn-success" value="+"></td>'
html += '<td><input type="button" id="removeRow" name="removeRow[]" class="form-control btn btn-danger" value="-"></td>';
html += '</tr>';
$('#journalRows').append(html);
$("#itemSearch-"+number).autocomplete({
source: "{{ route('autoCompSearch') }}",
minLength:3,
select: function(key, value){
console.log(key, value);
},
});
};
自动完成 jQuery UI 仅适用于 table 的第一行。 我正在使用 Bootstrap 上的自动完成 jQuery UI 处理药房搜索引擎表单,问题是自动完成仅适用于第一行。当我单击添加按钮时,它会创建一个新行,但在新行中它不起作用。
我的 jQuery 语法如下:
$("#itemSearch").autocomplete({
source: "{{ route('autoCompSearch') }}",
minLength:3,
select: function(key, value){
console.log(key, value);
},
});
我的 addRow() 如下;
$('#journalRows').on('keydown', '#addRow',function(event){
// alert('you are here...');
count++;
dynamic_field(count);
return true;
}
我的 dynamic_filed(count) 函数是;
function dynamic_field(number)
{
// New Function to add New Row in Journal
var html = '';
html += '<tr class="options" name="line_items">'
html += '<td width="5%"><input type="text" id="checkbox. $user->id ." name="id[]" class="form-control" value="" disabled=""></td>'
html += '<td width="15%"><input type="text" name="barcode_id[]" id="barcodeSearch" class="form-control"></td>'
html += '<td width="30%"><input type="text" name="item_id[]" id="itemSearch" class="form-control select-product"></td>'
html += '<td width="5%"><input type="text" name="qty[]" value="1" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
html += '<td width="10%"><input type="text" id="sal_price" value="1" name="sal_price[]" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
html += '<td width="5%"><input type="text" name="discPer[]" class="form-control" value="0" placeholder="Discount percentage..." onkeyup="InvoiceCalculation()"></td>'
html += '<td width="15%"><input type="text" id="totUnitAmount" name="totUnitAmount[]" class="form-control form-control-sm" value="0"></td>'
html += '<td><input type="button" id="addRow" name="addRow[]" class="form-control btn btn-success" value="+"></td>'
html += '<td><input type="button" id="removeRow" name="removeRow[]" class="form-control btn btn-danger" value="-"></td>';
html += '</tr>';
$('#journalRows').append(html);
};
这是有效的,但只有自动完成选项在第二行和以后的行中不起作用.....
对于新行,您需要更改自动完成字段的 ID。每个自动完成字段都应该有一个唯一的 ID:
$("#itemSearch").autocomplete({
source: "{{ route('autoCompSearch') }}",
minLength:3,
select: function(key, value){
console.log(key, value);
},
});
$("#itemSearch1").autocomplete({
source: "{{ route('autoCompSearch') }}",
minLength:3,
select: function(key, value){
console.log(key, value);
},
});
此外,您还需要在字段创建后初始化自动完成模块,否则它将不会出现在 DOM 中,并且 jQuery 将无法用于该字段
更新:
按如下方式更改您的 dynamic_field
函数:
function dynamic_field(number)
{
// New Function to add New Row in Journal
var html = '';
html += '<tr class="options" name="line_items">'
html += '<td width="5%"><input type="text" id="checkbox. $user->id ." name="id[]" class="form-control" value="" disabled=""></td>'
html += '<td width="15%"><input type="text" name="barcode_id[]" id="barcodeSearch" class="form-control"></td>'
html += '<td width="30%"><input type="text" name="item_id[]" id="itemSearch-'+number+'" class="form-control select-product"></td>'
html += '<td width="5%"><input type="text" name="qty[]" value="1" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
html += '<td width="10%"><input type="text" id="sal_price" value="1" name="sal_price[]" class="form-control calc" onkeyup="InvoiceCalculation()"></td>'
html += '<td width="5%"><input type="text" name="discPer[]" class="form-control" value="0" placeholder="Discount percentage..." onkeyup="InvoiceCalculation()"></td>'
html += '<td width="15%"><input type="text" id="totUnitAmount" name="totUnitAmount[]" class="form-control form-control-sm" value="0"></td>'
html += '<td><input type="button" id="addRow" name="addRow[]" class="form-control btn btn-success" value="+"></td>'
html += '<td><input type="button" id="removeRow" name="removeRow[]" class="form-control btn btn-danger" value="-"></td>';
html += '</tr>';
$('#journalRows').append(html);
$("#itemSearch-"+number).autocomplete({
source: "{{ route('autoCompSearch') }}",
minLength:3,
select: function(key, value){
console.log(key, value);
},
});
};