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: http://stackoverflow.com/questions/2663573/jquery-autocomplete-for-dynamically-created-inputs — ProgrammerV5, Apr 19 '17 at 13:00
i tried them and they did not work hence I asked the question — Dhaval Chheda, Apr 19 '17 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, Apr 19 '17 at 13:53

score 1 · Answer 1 · answered Apr 20 '17 at 03:55

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

            });

jquery ui autocomplete on dynamically generated input elements

1 Answers1