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

score 1 · Accepted Answer · edited May 23 '17 at 11:44

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.

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

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

You probably need a live binding.

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

edited May 23 '17 at 11:58

Community

1
1

answered Aug 07 '15 at 07:16

LcKjus

121
6

score 0 · Answer 3 · answered Aug 07 '15 at 07:24

0

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

answered Aug 07 '15 at 07:24

MazzCris

1,812
1
14
20

i did that however if the javascript isnt within the html the class isnt being read in. i cant have them in two separate files – Teddy Dong Aug 07 '15 at 07:32
the first two code blocks are within my index.php and the dynamic input is in a separate file dynamicscript.js. im confused since having both of them separate, the autocomplete doesnt work. however if i put the contents of dynamicscript.js within a – Teddy Dong Aug 07 '15 at 07:40
yes im sure the dynamicscript is being loaded as i can add/delete rows, just the autocomplete will not work on the newly added ones – Teddy Dong Aug 07 '15 at 07:45
there arent any errors, however the code works on firefox but not on google chrome – Teddy Dong Aug 07 '15 at 07:51
Happy to help. If this answer or any other one solved your issue, please mark it as accepted. – MazzCris Aug 08 '15 at 20:18

score 0 · Answer 4 · answered May 11 '20 at 00:13

0

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).

answered May 11 '20 at 00:13

SteveCav

6,649
1
50
52

html javascript autocomplete not working with dynamically added textboxes

4 Answers4