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

Requisition

搜索文本框会做自动完成的动作，它会显示在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

来源

2014-11-16 Athirah Hazira

尝试下面的东西。

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

来源

2014-11-16 14:02:42

谢谢！这工作！但我有一个问题将数据保存到数据库中。你能看看这个吗？ http://stackoverflow.com/questions/26965111/how-to-insert-values-from-dynamically-added-rows-into-database –

@AthirahHazira我已经回答了。请参阅解决方案。抱歉耽搁了！ –

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

回答

相关问题