jquery ui autocomplete on dynamically generated input elements

Question

I am creating input on the click of button and I want to add autocomplete functionality to it

Please note that it is working for a static element

my html code

<div class="pharmaSec">
                        <div class="form-group" id="medicineTable">
                            <div class="col-sm-8 selectContainer">
                                <input name="OTCtext[]" id="OTCtexts" class="form-control medicinefind"/>
                            </div>
                            <div class="col-sm-4 selectContainer">
                                <input type="text" class="form-control" placeholder="Qts" value="1"/>
                            </div>
                        </div>
                        <div class="form-group" id="medicineTableTemp">
                            <div class="col-sm-8 selectContainer">
                                <input name="OTCtext[]" id="OTCtext" class="form-control medicinefind">
                                <input type="hidden" id="hiddenValue" value="0">
                            </div>
                            <div class="col-sm-4 selectContainer">
                                <input type="text" class="form-control" placeholder="Qts" value="1"/>
                            </div>
                        </div>

my js code

$(document).ready(function () {
            $('#btn_add_new').click(function () {
                $('#medicineTable').append($('#medicineTableTemp').html());
                $("input.medicinefind:last").focus();
            });
        });

        $("input.medicinefind").live("keydown.autocomplete", function() {
            $(this).autocomplete({source: '/medicineSearch', minLength: 1});
        });

appreciate all the assistance needed.

There are other questions very similar to this one. Please take a look at this one, as an example: stackoverflow.com/questions/2663573/… — ProgrammerV5
– ProgrammerV5, Commented Apr 19, 2017 at 13:00
i tried them and they did not work hence I asked the question — Dhaval Chheda
– Dhaval Chheda, Commented Apr 19, 2017 at 13:22
i would imagine keydown.autocomplete won't exist until you instanciate the .autocomplete first.. try calling .autocomplete on the input after its created in DOM. - after the focus() event. — JF it
– JF it, Commented Apr 19, 2017 at 13:53

Dhaval Chheda · Accepted Answer · 2017-04-20 03:55:14Z

1

I found my answer just in case if anyboody is stuck with the same issue

 var counter = 0;
            $('#btn_add_new').click(function () {
                counter = counter+1;
                var id = "OTCtext"+counter;
                var template = ' <div class="col-sm-8 selectContainer"><input name="OTCtext[]" id="'+id+'" class="form-control medicinefind"><input type="hidden" id="hiddenValue" value="0"></div><div class="col-sm-4 selectContainer"><input type="text" name="medicine_qts[]" class="form-control" placeholder="Qts" value="1"/></div>';

               $('#medicineTable').append(template);
               $('#OTCtext' + counter).autocomplete({source: '/medicineSearch', minLength: 1});

            });

answered Apr 20, 2017 at 3:55

Dhaval Chheda

5,2675 gold badges29 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

jquery ui autocomplete on dynamically generated input elements

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related