CODEWITHSUNDEEP
javascriptjquery
Dhaval Chheda
Dhaval Chheda

Reputation: 5147

jquery ui autocomplete on dynamically generated input elements

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.

Upvotes: 2

Views: 1083

Answers (1)

Dhaval Chheda
Dhaval Chheda

Reputation: 5147

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

            });

Upvotes: 1

Related Questions