具有动态表Jquery和Javascript的自动完成功能

Question

I have resolved a few things, and it works now, thanks to this page, they helped me in another thing. Now, this is how I got the code, and the Autocomplete works, but only I can just with the ones that are loaded when the page is displayed, if I enter the first one, the autocomplete script puts the description, quantity and price of the code I entered, instead of just the first row, or the row I want to put the code in. This is my code right now.

 $(document).ready(function() { //this is added just to pre-populate some rows addRow2('dataTable'); $(".chkall").click(function() { if ($(".chkall").is(':checked')) { $("#dataTable input[type=checkbox]").each(function() { $(this).prop("checked", true); }); } else { $("#dataTable input[type=checkbox]").each(function() { $(this).prop("checked", false); }); } }); $('.get_total, .g_total').click(function(e) { g_total = 0; $('input.total').each(function() { g_total += eval($(this).val()); }); console.log(g_total); $('.g_total').html(g_total); }) $('input.total').on('change', function() { g_total = 0; $('input.total').each(function() { g_total += eval($(this).val()); $('.g_total').html(g_total); }) }) }) function grandTotal() { g_total = 0; $('input.total').each(function() { g_total += eval($(this).val()); $('.g_total').html(g_total); }) } function addRow2(tableid) { var table = $('#' + tableid); rowCount = table.children().length; //console.log(table.children().length); newrow = '<tr class="dataRow"><td><input type="checkbox" name="chkbox[]" class="remove"></td><td><input class="codigo" type="text" name="codigo[]"></td><td><input type="text" class="descripcion" name="descripcion[]"></td><td><input type="text" step="any" class="cantidad" min="1" onchange="calc2($(this))" name="cantidad[]"></td><td><input type="text" step="any" min="0" value="0" class="precio" name="precio[]" onchange="calc2($(this));"></td><td><input type="text" value="0" class="total" name="total[]"></td></tr>'; table.append(newrow); $("#dataTable input[id^='codigo']").autocomplete({ source:'buscarcompra.php', minLength:1 }); $("#dataTable input[id^='codigo']").focusout(function(){ $.ajax({ url:'producto.php', type:'POST', dataType:'json', data:{ codigo: $("#dataTable input[id^='codigo']").val()} }).done(function(respuesta){ $("#dataTable input[name^='descripcion']").val(respuesta.descripcion); $("#dataTable input[name^='precio']").val(respuesta.precio); }); }); } function calc2(_row) { row = _row.closest('.dataRow'); //console.log(); // qty = row.find('.cantidad').val(); price = row.find('.precio').val(); total = parseFloat(qty) * parseFloat(price); console.log('qty:' + qty + ' * price:' + price + ' = ' + total); row.closest('.dataRow').find('.total').val(total); grandTotal(); } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for (var i = 0; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } } catch (e) { alert(e); } } 

 .g_total { width: 100px; background-color: #ccc; height: 20px; display: inline-block; float: right; } .cantidad, .precio, .total { /* height: 50px; width: 40px;*/ text-align: center; } .cantidad { width: 84px; } .codigo, .descripcion { width: 54px } .precio, .total { width: 121px; } 

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" /> <h1>CARRITO DE COMPRAS</h1> <INPUT type="button" value="Agregar Producto" onClick="addRow2('dataTable')" /> <INPUT type="button" value="Borrar Producto" onClick="deleteRow('dataTable')" /> <input type="button" class="get_total" value="Get Total" /> <form id="myform" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post"> <TABLE border="1"> <thead> <tr> <th> <input type="checkbox" class="chkall"> </th> <th class="codigo">CODIGO</th> <th class="descripcion">DESCRIPCION</th> <th class="cantidad">CANTIDAD</th> <th class="precio">PRECIO</th> <th class='total'>TOTAL</th> </tr> </thead> <tbody id="dataTable"> </tbody> </TABLE> </div> </br> <div class="g_total"> </span> 

Answer 1

You can create a function to attach .autocomplete() and .focusout() events to :last .codigo element at .ready() handler and addRow function call. Substituted + operator for eval() calls.

 var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $(document).ready(function() { //this is added just to pre-populate some rows addRow2('dataTable'); addAutocompleteAndFocusout("#dataTable input[class^='codigo']", availableTags); $(".chkall").click(function() { if ($(".chkall").is(':checked')) { $("#dataTable input[type=checkbox]").each(function() { $(this).prop("checked", true); }); } else { $("#dataTable input[type=checkbox]").each(function() { $(this).prop("checked", false); }); } }); $('.get_total, .g_total').click(function(e) { g_total = 0; $('input.total').each(function() { g_total += +$(this).val(); }); console.log(g_total); $('.g_total').html(g_total); }) $('input.total').on('change', function() { g_total = 0; $('input.total').each(function() { g_total += +$(this).val(); $('.g_total').html(g_total); }) }) }) function addAutocompleteAndFocusout(selector, src) { (typeof selector === "string" ? $(selector) : selector).autocomplete({ source: src }) .focusout(function() { console.log("focusout called") }) } function grandTotal() { g_total = 0; $('input.total').each(function() { g_total += +$(this).val(); $('.g_total').html(g_total); }) } function addRow2(tableid) { var table = $('#' + tableid); rowCount = table.children().length; newrow = '<tr class="dataRow"><td><input type="checkbox" name="chkbox[]" class="remove"></td><td><input class="codigo" type="text" name="codigo[]"></td><td><input type="text" class="descripcion" name="descripcion[]"></td><td><input type="text" step="any" class="cantidad" min="1" onchange="calc2($(this))" name="cantidad[]"></td><td><input type="text" step="any" min="0" value="0" class="precio" name="precio[]" onchange="calc2($(this));"></td><td><input type="text" value="0" class="total" name="total[]"></td></tr>'; table.append(newrow); // attach `.autocomplete()`, `.focusout()` to `:last` `.codigo` element addAutocompleteAndFocusout(table.find(".codigo:last"), availableTags); } function calc2(_row) { row = _row.closest('.dataRow'); qty = row.find('.cantidad').val(); price = row.find('.precio').val(); total = parseFloat(qty) * parseFloat(price); console.log('qty:' + qty + ' * price:' + price + ' = ' + total); row.closest('.dataRow').find('.total').val(total); grandTotal(); } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for (var i = 0; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } } catch (e) { alert(e); } } 

 .g_total { width: 100px; background-color: #ccc; height: 20px; display: inline-block; float: right; } .cantidad, .precio, .total { /* height: 50px; width: 40px;*/ text-align: center; } .cantidad { width: 84px; } .codigo, .descripcion { width: 54px } .precio, .total { width: 121px; } 

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" /> <h1>CARRITO DE COMPRAS</h1> <INPUT type="button" value="Agregar Producto" onClick="addRow2('dataTable')" /> <INPUT type="button" value="Borrar Producto" onClick="deleteRow('dataTable')" /> <input type="button" class="get_total" value="Get Total" /> <form id="myform" action="" method="post"> <TABLE border="1"> <thead> <tr> <th> <input type="checkbox" class="chkall"> </th> <th class="codigo">CODIGO</th> <th class="descripcion">DESCRIPCION</th> <th class="cantidad">CANTIDAD</th> <th class="precio">PRECIO</th> <th class='total'>TOTAL</th> </tr> </thead> <tbody id="dataTable"> </tbody> </TABLE> <br/> <div class="g_total"> </div> </form>