Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Autocomplete UI Insert values into more than 1 textbox

Featured Replies

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.

  • 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});
});

 

 

 

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 by andy9l

  • 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 by Tex0gen

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.