Hitesh Modha
Hitesh Modha

Reputation: 2790

Jquery AutoComplete is not working in dynamically added form fields

I am repeating 3 fields in form, All are having autoComplete.

Fields:

    <input type="text" class="input-block-level" Placeholder="College" name="College" />
    <input type="text" class="input-block-level" Placeholder="Course" name="Course" />
    <input type="text" class="input-block-level" Placeholder="Major" name="Major" />
    <a style="cursor: pointer" onclick="AddThisCollege()">Add More </a>

AutoComplete JS

  $( "input[name='College']" ).autocomplete({
    source: availableTags
  });

  $( "input[name='Course']" ).autocomplete({
    source: availableTags
  });

  $( "input[name='Major']" ).autocomplete({
    source: availableTags
  });

AddThisCollege() Code:

$("#CollegeListDiv").append('<br /><div class="CollegeList"> <input type="text" class="input-block-level" Placeholder="College" id="txtCollege" name="College" /> <input type="text" class="input-block-level" Placeholder="Course" id="txtCourse" name="Course" /> <input type="text" class="input-block-level" Placeholder="Major" id="txtMajor" name="Major" /> </div>');

Auto Complete is working for first three classes, it is not working for dynamically added fields.

Upvotes: 0

Views: 1355

Answers (1)

Sridhar R
Sridhar R

Reputation: 20408

Add your autocomplete function in inside AddThisCollege function too.then only event attached to dynamic elements

Try this

 function AddThisCollege(){

   $("#CollegeListDiv").append('<br /><div class="CollegeList"> <input type="text" class="input-block-level" Placeholder="College" id="txtCollege" name="College" /> <input type="text" class="input-block-level" Placeholder="Course" id="txtCourse" name="Course" /> <input type="text" class="input-block-level" Placeholder="Major" id="txtMajor" name="Major" /> </div>');
    $( "input[name='College'],input[name='Course'],input[name='Major']" ).autocomplete({
        source: availableTags
      });
    }

Upvotes: 3

Related Questions