Question

I’ve been trying to bind two functions together without success: I want an autocomplete to run on input fields that are added when the user clicks on “add”. I can get the two to run separately and have figured out that I should be binding the two functions…but as a noob, I’m almost sure I’m doing it wrong. Any help is appreciated!!

here is the autocomplete code:

 var J = jQuery.noConflict();
 J(document).ready(function(){
 J('#professor').autocomplete({source:'autocomplete.php', minLength:1});
 });

Here is the add input code:

    var J = jQuery.noConflict();
J(document).ready(function(){
J("#addproffield").click(function(){
var input = J("<div class='added-field'><input type='text' name='professor[]' id='professor' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
J("#addprof").append(input);
});
J(".remove-btn").live('click',function() {
J(this).parent().remove();
});
});

here is my failed attempt to bind the two:

   var J = jQuery.noConflict();
J(document).ready(function(){
J("#addproffield").click(function(){
var input = J("<div class='added-field'><input type='text' name='professor[]' id='professor' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
J("#addprof").append(input);
input.professor({
     source:'autocomplete.php', minLength:1
    });
});
J(".remove-btn").live('click',function() {
J(this).parent().remove();
});
    });

Thank you!!

Answer 1

You’re binding the autocmplete (.professor?) to the <div> instead of the <input> in your attempt, so it just needs a little adjustment to actually be the <input> element via .find(), like this:

J(document).ready(function(){
    J("#addproffield").click(function(){
    var div = J("<div class='added-field'><input type='text' name='professor[]' size='25' value='' />&nbsp;&nbsp;<a href='' class='remove-btn'>Remove field</a></div>");
    J("#addprof").append(div);

    div.find("input").autocomplete({
        source:'autocomplete.php', minLength:1
    });
});

Note the html changes above, the id need not be there now and shouldn’t be, since it’s invalid to use the same ID multiple times.