使用 .clone() 方法创建的多行上的 jQuery UI 自动完成
我对 jQuery 几乎是新手...我发现了一些教程/帖子解释 1. 如何克隆表格行(对于插入发票详细信息很有用): http://forum.jquery.com/topic/validate-will-not-submit-to-server 2. 如何通过 PHP 和 MySQL 使用 jQuery UI 自动完成(对于从数据库表检索产品并避免输入所有内容很有用): http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php- and-mysql/
好吧,到目前为止我可以克隆表行,并且可以在第一行上进行自动完成工作,但是当我添加另一行时会出现问题,并且我希望那里的自动完成工作也能完成 我在 StackOverflow 中找到了一个线程(http://stackoverflow.com/questions/1492198/jquery-auto-complete-for-dynamically- generated-textboxes),但没有运气应用到我的案例......
现在,代码:
HTML 部分
<table border="0" cellspacing="0" cellpadding="4" class="grid" id="details">
<thead>
<tr>
<th scope="col">Codice</th>
<th scope="col">Nome</th>
<th scope="col">Quantità</th>
<th scope="col">Unità di misura</th>
<th scope="col">Costo U.</th>
<th scope="col">Totale</th>
</tr>
</thead>
<tbody>
<tr id="row_0" class="iterable">
<td><input type="text" name="det_sku_0" id="det_sku_0" class="sku required" /></td>
<td><input type="text" name="det_name_0" id="det_name_0" class="name required" /></td>
<td><input name="det_quantity_0" id="det_quantity_0" type="text" class="required" /></td>
<td> </td>
<td><input name="det_price_0" id="det_price_0" type="text" class="required" />€</td>
<td> </td>
</tr>
</tbody>
</table>
<ul>
<li><a href="javascript:void(0);" id="remove" class="icons icon-0">Rimuovi ultima riga</a></li>
<li><a href="javascript:void(0);" id="add" class="icons icon-new">Aggiungi riga</a></li>
<li><input type="submit" name="button" id="button" value="Salva tutto" /></li>
</ul>
jQuery 部分
function addrow(destination) {
rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1;
clonecopy = destination.clone(true);
clonecopy.attr("class","iterable");
// update numerical suffixes
clonecopy.attr("id","row_"+rowcount);
clonecopy.find('.sku, .name').val('');
clonecopy.find("input[name^='det_sku']").attr({
"name": "det_sku_"+rowcount,
"id": "det_sku_"+rowcount
});
clonecopy.find("input[name^='det_name']").attr({
"name": "det_name_"+rowcount,
"id": "det_name_"+rowcount
});
clonecopy.find("select[name^='det_quantity']").attr({
"name": "det_quantity_"+rowcount,
"id": "det_quantity_"+rowcount
});
clonecopy.find("select[name^='det_price']").attr({
"name": "det_price"+rowcount,
"id": "det_price"+rowcount
});
clonecopy.insertAfter(destination);
$('#det_arrayitems').val(rowcount);
}
$("#add").click(function() {
parent_row = $('#details tbody>tr:last');
addrow(parent_row);
});
$('input.sku').autocomplete({
source: "../json/products.php",
minLength: 2,
select: function(event, ui) {
$(this).parent().siblings().children('input.name').val(ui.item.name);
}
})
我也尝试过这个(以及其他一些想法),但没有运气
$("#add").live("click", function() {
parent_row = $('#details tbody>tr:last');
addrow(parent_row);
$('input.sku').autocomplete({
source: "../json/products.php",
minLength: 2,
select: function(event, ui) {
$('input.sku').parent().siblings().children('input.name').val(ui.item.name);
}
})
});
请,你能帮助我吗? 谢谢...
I'm almost new to jQuery... I found some tutorials/posts explaining
1. how to clone a table row (useful for inserting invoice details): http://forum.jquery.com/topic/validate-will-not-submit-to-server
2. how to use the jQuery UI autocomplete with PHP and MySQL (useful for retrieving products from a db table and avoid typing everything): http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/
Well, 'til now I can clone table rows and I can get autocmplete work on the first row, but problems arise when I add another row and I expect the autocomplete work there, too
I found a thread here in StackOverflow (http://stackoverflow.com/questions/1492198/jquery-auto-complete-for-dynamically-generated-textboxes), but had no luck of applying to my case...
And now, the code:
The HTML part
<table border="0" cellspacing="0" cellpadding="4" class="grid" id="details">
<thead>
<tr>
<th scope="col">Codice</th>
<th scope="col">Nome</th>
<th scope="col">Quantità</th>
<th scope="col">Unità di misura</th>
<th scope="col">Costo U.</th>
<th scope="col">Totale</th>
</tr>
</thead>
<tbody>
<tr id="row_0" class="iterable">
<td><input type="text" name="det_sku_0" id="det_sku_0" class="sku required" /></td>
<td><input type="text" name="det_name_0" id="det_name_0" class="name required" /></td>
<td><input name="det_quantity_0" id="det_quantity_0" type="text" class="required" /></td>
<td> </td>
<td><input name="det_price_0" id="det_price_0" type="text" class="required" />€</td>
<td> </td>
</tr>
</tbody>
</table>
<ul>
<li><a href="javascript:void(0);" id="remove" class="icons icon-0">Rimuovi ultima riga</a></li>
<li><a href="javascript:void(0);" id="add" class="icons icon-new">Aggiungi riga</a></li>
<li><input type="submit" name="button" id="button" value="Salva tutto" /></li>
</ul>
The jQuery part
function addrow(destination) {
rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1;
clonecopy = destination.clone(true);
clonecopy.attr("class","iterable");
// update numerical suffixes
clonecopy.attr("id","row_"+rowcount);
clonecopy.find('.sku, .name').val('');
clonecopy.find("input[name^='det_sku']").attr({
"name": "det_sku_"+rowcount,
"id": "det_sku_"+rowcount
});
clonecopy.find("input[name^='det_name']").attr({
"name": "det_name_"+rowcount,
"id": "det_name_"+rowcount
});
clonecopy.find("select[name^='det_quantity']").attr({
"name": "det_quantity_"+rowcount,
"id": "det_quantity_"+rowcount
});
clonecopy.find("select[name^='det_price']").attr({
"name": "det_price"+rowcount,
"id": "det_price"+rowcount
});
clonecopy.insertAfter(destination);
$('#det_arrayitems').val(rowcount);
}
$("#add").click(function() {
parent_row = $('#details tbody>tr:last');
addrow(parent_row);
});
$('input.sku').autocomplete({
source: "../json/products.php",
minLength: 2,
select: function(event, ui) {
$(this).parent().siblings().children('input.name').val(ui.item.name);
}
})
I also tried this (and a couple of other ideas), but no luck
$("#add").live("click", function() {
parent_row = $('#details tbody>tr:last');
addrow(parent_row);
$('input.sku').autocomplete({
source: "../json/products.php",
minLength: 2,
select: function(event, ui) {
$('input.sku').parent().siblings().children('input.name').val(ui.item.name);
}
})
});
Please, can you help me?
Thanks...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
找到解决方案,我必须将自动完成功能放入 addrow 函数中,并根据(并感谢)从 .clone(true) 中删除单词“true”: JQuery:如何克隆自动完成字段?
Found the solution, I had to put the autocomplete inside the addrow function and remove the word "true" from the .clone(true) according (and thanks) to this: JQuery: How to clone autocomplete fields?
我做了类似的事情,我有一个 div 保存所有行,行中的 eact 输入字段有一个 rel 标记,其名称和 ID 的基本部分,然后单击添加一行,我调用以下内容:
I do something similar where I have a div that holds all the rows, and eact input field in a row has a rel tag with the base part of it's name and ID and then on the click to add a row I call the following:
创建类名为 addmore 的按钮,然后在按钮上单击调用以下方法。请像下面这样形成表格行,最后将形成的 html 附加到表格中。
以下脚本将执行删除部分...对于删除,创建类名称为delete 的按钮。
我为示例发票系统制作了简单的教程,其中包含您从
中提到的所有功能使用 jQuery AutoComplete 的发票系统
Create button with class name of addmore, then on the button click call the following method. Please form your table row like this below and finally append that formed html to your table.
Following script will do the deletion part... For delete create button with class name of delete.
I had made simple tutorial for sample invoice system with all the functionalities you mentioned right from
Invoice System Using jQuery AutoComplete