March 25, 201313 yr I have the autocomplete working and getting values from mysql but am wondering if there is a way of inserting the selected row data into more than 1 textbox. At the moment, the value of the selected autocomplete data only goes into that 1 textbox. I have read the autocomplete ui wiki but am unable to find anything to suggest you can do this. Any help (As always) much appreciated.
March 25, 201313 yr Override the .complete() method, grab the value, and put it in whatever fields you need to. At least, that's how I'd do it - example in that link above.
March 26, 201313 yr Author Override the .complete() method, grab the value, and put it in whatever fields you need to. At least, that's how I'd do it - example in that link above. Thank you. Iv just noticed the autocomplete does not apply to all rows (That you helped with last time) yet i have the class set to the first row of each new row. After row 1, nothing happens. $(document).ready(function(){ var table = $("#TextBoxesGroup"); var row = table.find("tr").eq(1); var count = 0; $("#addRow").click(function(e){ if (table.find("tr").length >= 10){ alert("Maximum of 10 rows"); return; } var newRow = row.clone(); var regex = new RegExp("data\[[0-9]+\]", "g"); newRow.html(newRow.html().replace(regex, "data[" + (++count) + "]")); table.append(newRow); }); $(document).on('keyup', "*[data-field='quantity'],*[data-field='price']", function(e){ var thisRow = $(this).parents("tr.iii"); var rowTotalField = thisRow.find("*[data-field='total']"); var price = parseFloat(thisRow.find("*[data-field='price']").val()); var quantity = parseInt(thisRow.find("*[data-field='quantity']").val()); rowTotalField.val("\u00A3" + (!isNaN(price) && !isNaN(quantity) ? price*quantity : 0).toFixed(2)); var total = 0; table.find("*[data-field='total']").each(function(){ var t = parseFloat($(this).val().replace("£", "")); total += !isNaN(t) ? t : 0; }); $(".totalhide").val(total.toFixed(2)); $(".total").text(total.toFixed(2)); }); }); jQuery(document).ready(function($){ $('.autof').autocomplete({source:'suggest.php', minLength:2}); });
March 26, 201313 yr That's because the further rows are being injected by the JS. Your .autocomplete call is only on document load...and the extra rows aren't there on document load. Hopefully that makes sense? Better to teach a man to fish and all... Anyway, this might fix the problem (replace all of the above, with the below - also done a couple of tidy-ups): $(function(){ var table = $("#TextBoxesGroup"); var row = table.find("tr").eq(1); var count = 0; $("#addRow").click(function(e){ if (table.find("tr").length >= 10){ alert("Maximum of 10 rows"); return; } var newRow = row.clone(); var regex = new RegExp("data\[[0-9]+\]", "g"); newRow.html(newRow.html().replace(regex, "data[" + (++count) + "]")); table.append(newRow); newRow.autocomplete({source:'suggest.php', minLength:2}); }); $(document).on('keyup', "*[data-field='quantity'],*[data-field='price']", function(e){ var thisRow = $(this).parents("tr.iii"); var rowTotalField = thisRow.find("*[data-field='total']"); var price = parseFloat(thisRow.find("*[data-field='price']").val()); var quantity = parseInt(thisRow.find("*[data-field='quantity']").val()); rowTotalField.val("\u00A3" + (!isNaN(price) && !isNaN(quantity) ? price*quantity : 0).toFixed(2)); var total = 0; table.find("*[data-field='total']").each(function(){ var t = parseFloat($(this).val().replace("£", "")); total += !isNaN(t) ? t : 0; }); $(".totalhide").val(total.toFixed(2)); $(".total").text(total.toFixed(2)); }); $('.autof').autocomplete({source:'suggest.php', minLength:2}); }); Edited March 26, 201313 yr by andy9l
March 26, 201313 yr Author Sorry, i fixed it earlier on, now im having issues with it auto-correcting all of my fields with the last data that was input and the totals are not working. Is there an event you can use to update it without keyup or clicking? HTML: <tr class="iii"> <td class="first"><input placeholder="Code" name="data[0][0]" id="itmcode" class="autof" /></td> <td><input type="text" name="data[0][1]" class="itmname" id="itmnme" placeholder="Name" /></td> <td><input type="text" name="data[0][2]" class="itmdesc" id="itmdesc" placeholder="Description" /></td> <td><input type="text" data-field="price" class="itmprc" name="data[0][3]" id="itmamnt" placeholder="Price" class="auto" /></td> <td><input type="text" data-field="quantity" name="data[0][4]" id="itmqty" value="1" class="itmqty" /></td> <td><input type="text" data-field="total" name="data[0][5]" id="totals" class="total" placeholder="Total" readonly="readonly" /></td> <td><input type="checkbox" name="data[0][6]" id="prodadd" /></td> </tr> JQuery: $(document).ready(function(){ var table = $("#TextBoxesGroup"); var row = table.find("tr").eq(1); var count = 0; $("#addRow").click(function(e){ if (table.find("tr").length >= 10){ alert("Maximum of 10 rows"); return; } var newRow = row.clone(); var regex = new RegExp("data\[[0-9]+\]", "g"); newRow.html(newRow.html().replace(regex, "data[" + (++count) + "]")); table.append(newRow); }); $(document).on('focus keyup', "*[data-field='quantity'],*[data-field='price']", function(e){ var thisRow = $(this).parents("tr.iii"); var rowTotalField = thisRow.find("*[data-field='total']"); var price = parseFloat(thisRow.find("*[data-field='price']").val()); var quantity = parseInt(thisRow.find("*[data-field='quantity']").val()); rowTotalField.val("\u00A3" + (!isNaN(price) && !isNaN(quantity) ? price*quantity : 0).toFixed(2)); var total = 0; table.find("*[data-field='total']").each(function(){ var t = parseFloat($(this).val().replace("£", "")); total += !isNaN(t) ? t : 0; }); $(".totalhide").val(total.toFixed(2)); $(".total").text(total.toFixed(2)); }); }); $(document).on("focus keyup", function() { $(".autof").autocomplete({ source: "suggest.php", minLength: 2, select: function(event, ui) { $('.autof').val(ui.item.value); $('.itmname').val(ui.item.name); $('.itmdesc').val(ui.item.desc); $('.itmprc').val(ui.item.price); $('.total').val('£' + ui.item.price); } }); }); Edited March 26, 201313 yr by Tex0gen
Create an account or sign in to comment