jQuery 自动完成远程数据源和动态行答案

【问题标题】：jQuery Autocomplete remote datasource and dynamic rowsjQuery 自动完成远程数据源和动态行
【发布时间】：2014-11-16 08:19:46
【问题描述】：

我有个主意：

Search 文本框将执行自动完成操作，并将结果显示在 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

【问题讨论】：

标签： javascript php jquery sql-server autocomplete

【解决方案1】：

试试下面的方法。

    <!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>

【讨论】：

谢谢！这行得通！但我有一个问题将数据保存到数据库中。你能看看这个吗？ stackoverflow.com/questions/26965111/…
@AthirahHazira 我已经回答了。请查看解决方案。抱歉耽搁了！