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

Community · Accepted Answer · 2017-05-23 11:44:22Z

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.

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

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Aug 7, 2015 at 7:28

Erik Inkapööl

3882 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:58:59Z

0

You probably need a live binding.

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

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Aug 7, 2015 at 7:16

LcKjus

1416 bronze badges

Comments

MazzCris · Accepted Answer · 2015-08-07 07:24:58Z

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 7, 2015 at 7:24

MazzCris

1,8301 gold badge14 silver badges21 bronze badges

5 Comments

Teddy Dong Over a year ago

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 Over a year ago

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 <script> tag in index.php the autocomplete will work.

Teddy Dong Over a year ago

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 Over a year ago

there arent any errors, however the code works on firefox but not on google chrome

MazzCris Over a year ago

Happy to help. If this answer or any other one solved your issue, please mark it as accepted.

SteveCav · Accepted Answer · 2020-05-11 00:13:42Z

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, 2020 at 0:13

SteveCav

6,7271 gold badge52 silver badges52 bronze badges

Collectives™ on Stack Overflow

html javascript autocomplete not working with dynamically added textboxes

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related