html javascript autocomplete not working with dynamically added textboxes

Question

Hi when I use jquery autocomplete on 1 textbox it work, but when i dynamically add new textbox these new textbox dont have the same autocomplete

Here is my javascript autocomplete

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript" src="dynamicscript.js"></script> 
<script>
    $(document).ready(function(){
        $(".DRUG_NAME").autocomplete("gethint.php", {
            selectFirst: true
        });

    });
</script>

this is what i am dynamically adding each time, html code

<form method="post">

    <p>
        <input type="button" value="Add Drug" onClick="addRow('dataTable')" />
        <input type="button" value="Remove Drug" onClick="deleteRow('dataTable')" />
    </p>

    <table id="dataTable" class="form" border="1">
        <tbody>
            <tr>
                <p>
                    <td>
                        <input type="checkbox" required="required" name="chk[]" checked="checked" />
                    </td>
                    <td>
                        <label>Drug</label>
                        <input type="text" required="required" name="DRUG_NAME[]" id="DRUG_NAME" class="DRUG_NAME">
                    </td>

                </p>
            </tr>
        </tbody>
    </table>

    <input type="submit" value="Save" />
</form>

this is the javascript dynamically add / remove row i even added the autocomplete function after my addrow to try and get the jquery autocomplete to be called each time after i add row but it still does not work

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 5) {  // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    } else {
        alert("Maximum Drug is 5");    
    }

    $("#DRUG_NAME").autocomplete("gethint.php", {
        selectFirst: true
    });
}

function deleteRow(tableID) {
    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) {
            if(rowCount < 1) {  // limit the user from removing all the fields
                alert("Nothing to Remove");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

any ideas?? tx

Answer 1

The following code (from your post) attaches events to the elements with class DRUG_NAME that currently exist on the page:

$(".DRUG_NAME").autocomplete("gethint.php", {
    selectFirst: true
});

When you dynamically add an element that selector will be updated, but the events still won't be attached, see this answer: Event binding on dynamically created elements?

Using that answer, together with the one @LcKjus linked in his answer ( Bind jQuery UI autocomplete using .live() ), I believe this will work for you (replace the code above with this snippet to test):

$(".DRUG_NAME").on("focus", function (event) {
   $(this).autocomplete(options);
});

This may run the autocomplete code multiple times (if the user refocuses the input field), though, so be aware of that.

PS As others have noted, it is unwise to have multiple elements with the same id on the same page.

Answer 2

You probably need a live binding.

Take a look at this post: Bind jQuery UI autocomplete using .live()

Answer 3

The problem is that you are creating elements with the same ID DRUG_NAME and then you are applying autocomplete selecting the field by ID.

Remove the id from the input field of the first row, as it is going to be replicated:

<input type="text" required="required" name="DRUG_NAME[]" class="DRUG_NAME">

Use the class selector when you create new rows:

$(".DRUG_NAME").autocomplete("gethint.php", {
// ^^
    selectFirst: true
});

Answer 4

The code to bind the autocomplete is being run on document ready. You need to run it again after you add the dynamic text boxes (maybe create a bindAuto() function or whatever, and run it from both places).