Share if you care: Downloading? Please take a moment to share this article.

Sometimes it might come in handy to be able to use jQuery’s AutoComplete plugin using multiple inputs in one table.  For example, let’s say that you are working on an invoice application that requires you to add multiple line items to each row and on each row you want to have the ability to use the jQuery AutoComplete to retrieve item information.

The end user inputs the item number in the input box and the AutoComplete brings back some items for us to select form.  Now, the user clicks the add row button and another row is added to the table allowing the user to input another item number to have AutoComplete bring back yet another list of items.  Then, the user decides that the item above was entered incorrectly so the user goes back to the first line item and makes the change.

Our problem is how does autocomplete know which row the user is wanting to use the autocomplete function?  Well, we have to tell it which one to use. In this tutorial I will show you how this is done using .find() method.  You are actually getting two features in one.  I provide you with a framework for creating your own invoice or quoting system.  However, I don’t provide the calculations for totals and the like.

Please note that I don’t go into any detail on how to add a row to the table, deleting a row or the actual autocomplete function, though all those operations are in this tutorial. It’s almost like getting a gift, right? I will in the very near future, provide those tutorials for my visitors.

Let get started by diving right into the jQuery.  When the document loads the first thing we need to do is bind the autocomplete() to the current input box #itemCode in the table row.

    $('#itemCode').autocomplete({
        source: 'data/item-data.php',
        minLength: 1,
        select: function(event, ui) {
            var $itemrow = $(this).closest('tr');
                    // Populate the input fields from the returned values
                    $itemrow.find('#itemCode').val(ui.item.itemCode);
                    $itemrow.find('#itemDesc').val(ui.item.itemDesc);
                    $itemrow.find('#itemPrice').val(ui.item.itemPrice);

                    // Give focus to the next input field to recieve input from user
                    $('#itemQty').focus();

            return false;
	    }
    // Format the list menu output of the autocomplete
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
            .appendTo( ul );
    };

We also override the list output using _renderItem within the autocomplete function.  This is something that most are unaware of how to complete so thought I’d I share it with you.  The normal autocomplete operation just brings back the the item you are searching for but in our case we can show the itemCode and the itemDesc in the menu list.

Next, we want to load a “temp” row and the table we are working with in the DOM so we can use it every time the user clicks the Add Item button.

    // Get the table object to use for adding a row at the end of the table
    var $itemsTable = $('#itemsTable');

    // Create an Array to for the table row. ** Just to make things a bit easier to read.
    var rowTemp = [
        '<tr class="item-row">',
            '<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
            '<td><input name="itemCode[]" class="tInput" value="" id="itemCode" /> </td>',
            '<td><input name="itemDesc[]" class="tInput" value="" id="itemDesc"  readonly="readonly" /></td>',
            '<td><input name="itemQty[]" class="tInput" value="" id="itemQty" /></td>',
            '<td><input name="itemPrice[]" class="tInput" value="" id="itemPrice" /></td>',
        '</tr>'
    ].join('');

Now, when the user clicks the Add Item button we can add the “temp” row to the table.   We use the .find() method to identify the row items in the newly created row.  When the user clicks “Add Item” we look through the rowTemp array and find all the values that make up the inputs so we can use them for the autocomplete() function.

    // Add row to list and allow user to use autocomplete to find items.
    $("#addRow").bind('click',function(){

        var $row = $(rowTemp);

        // save reference to inputs within row
        var $itemCode 	        = $row.find('#itemCode');
        var $itemDesc 	        = $row.find('#itemDesc');
        var $itemPrice	        = $row.find('#itemPrice');
        var $itemQty	        = $row.find('#itemQty');

        if ( $('#itemCode:last').val() !== '' ) {

            // apply autocomplete widget to newly created row
            $row.find('#itemCode').autocomplete({
                source: 'data/item-data.php',
                minLength: 1,
                select: function(event, ui) {
                    $itemCode.val(ui.item.itemCode);
                    $itemDesc.val(ui.item.itemDesc);
                    $itemPrice.val(ui.item.itemPrice);

                    // Give focus to the next input field to recieve input from user
                    $itemQty.focus();

                    return false;
                }
            }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
                    .appendTo( ul );
            };
            // Add row after the last row in table
            $('.item-row:last', $itemsTable).after($row);
            $($itemCode).focus();

        } // End if last itemCode input is empty
        return false;
    });

    $('#itemCode').focus(function(){
        window.onbeforeunload = function(){ return "You haven't saved your data.  Are you sure you want to leave this page without saving first?"; };
    });

Notice the the autocomlete() function is using the following.  This tells the autocomplete that we what to find the #itemCode id in the newly created row.

 $row.find('#itemCode').autocomplete({

 Resources

• .autocomplete()
• .find()
• .bind()