javascript — jQuery Автозаполнение удаленного источника данных и динамических строк

Question

javascript — jQuery Автозаполнение удаленного источника данных и динамических строк

У меня есть идея сделать это:

реквизиция

Поиск textbox выполнит действие автозаполнения и отобразит результат на textbox 1 , textbox 2, textbox 3 и пользователь
введите количество, которое они хотят на textbox 4,
Предполагается, что после поиска элемента пользователь должен нажать ADD Кнопка и автоматически страница сгенерирует строку без перезагрузки страницы. Таким образом, когда пользователь выбрал второй элемент, который он желает, страница сгенерирует вторую строку ниже первых.
Чтобы завершить процесс, пользователь должен нажать SUBMIT кнопку, а затем данные будут вставлены в базу данных.

Мне удалось сделать автозаполнение:

<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 но я очень новичок для них обоих. Я нашел несколько примеров, которые генерируют коды и реализуют автозаполнение в динамических строках. Но я хочу, чтобы это было сгенерировано after пользователь вводит данные и, нажав кнопку ADD

0

android autocomplete javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Попробуйте что-то вроде ниже.

    <!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"/>&nbsp;&nbsp;<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>

1