jQuery的自动完成远程数据源和动态行 [英] jQuery Autocomplete remote datasource and dynamic rows
本文介绍了jQuery的自动完成远程数据源和动态行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个想法，要做到这一点：
I have an idea to do this :
- 搜索文本框会做自动完成动作，它会显示在结果
文本框1，文本框2，文本框3和用户
将进入他们想要的数量文本4。 - 寻找项目后咋办，用户必须preSS的
添加按钮，并自动将页面将生成一个行无需重新加载页面。因此，当用户选择了他们所期望的第二个项目，页面将生成下面的第一批第二行。 - 要完成的过程中，用户将不得不preSS的
提交按钮，然后将数据会被插入到数据库中。
- Search textbox will do the autocomplete action and it will display the result on
textbox 1,textbox 2,textbox 3and user will enter the Quantity that they want ontextbox 4. - Supposed after searching for an Item, the user must press the
ADDbutton and automatically the page will generate a row without reloading the page. So when the user chose the second item that they desire, the page will generate a second row below the first ones. - To finish the process, the user will have to press the
SUBMITbutton and then the data will be inserted into the database.
我能够做到自动完成：
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#ItemName" ).autocomplete({
source: "requisition_search.php",
minLength: 1,
select: function( event, ui )
{
$('#ItmId').val(ui.item.id);
$('#ItmName').val(ui.item.value);
$('#ItmUOM').val(ui.item.uom);
$('#ItmQty').val(ui.item.qty);
}
});
});
</script>
但我不知道该怎么做动态行。我知道有些使用 JS 或的jQuery ，但我很新的这两个EM的。我发现一些例子，产生codeS和实施动态行的自动完成。但我想它要生成在用户输入的数据，并通过点击按钮添加
But i have no idea how to do the dynamic rows. I know some uses JS or jQuery but i am very new to both of em. I've found some examples that generate codes and implement the autocomplete on the dynamically rows. But i want it to be generated after the user enters the data and by the clicking the button ADD
推荐答案
尝试类似下面。
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Dynamic Rows</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#add").on("click",function(){
var rowcount = $("#rowcount").val();
var row = '<tr id="'+rowcount+'"><td>'+$("#itemid").val()+'</td><td>'+$("#itemname").val()+'</td><td>'+$("#uom").val()+'</td><td>'+$("#quantity").val()+'</td></tr>';
rowcount = parseInt(rowcount)+1;
$("#rowcount").val(rowcount);
$("#dataTab").append(row);
$("#dataTab").show();
$("#submit").show();
});
});
</script>
</head>
<body>
<form name="jqtest" action="#">
Item ID : <input type="text" name="itemid" id="itemid"/><br/><br/>
Item name : <input type="text" name="itemname" id="itemname"/><br/><br/>
UOM : <input type="text" name="uom" id="uom"/><br/><br/>
Quantity : <input type="text" name="quantity" id="quantity"/><br/><br/>
<p> <input type="reset" name="reset" id="reset" value="RESET"/> <input type="button" name="add" id="add" value="ADD"/> </p>
<input type="hidden" name="rowcount" id="rowcount" value="1"/>
</form>
<table id="dataTab" style="display:none;" border="1">
<tr>
<th>Item ID</th>
<th>Item name</th>
<th>UOM</th>
<th>Quantity</th>
</tr>
</table>
<p> <input style="display:none;" type="button" name="submit" id="submit" value="submit"/> </p>
</body>
</html>
这篇关于jQuery的自动完成远程数据源和动态行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
