jquery auto complete for dynamically generated textboxes

Question

hi,

i am new to jquery, i am working on a web page which needs generating text boxes dynamically with autocomplete facility.

i tested $("#some").autocomplete(data); on some static content, it worked perfectly.

however, when i try the same technique with dynamically generated text boxes it's not working!

my code looks as follows:

$(function() {  

  $("#button_newproduct").click(function(){  
    $("#products_table > tbody").append(
      "<tr><td><input type='text'name='td_products["+counter+"]'/></td></tr>");
  });
  var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" ");
  $('input[name^=td_products]').autocomplete(data);
});

thanks guys i am done with this with ur help.

now, another problem. i am loading the array(input to autocomplete) with a DWR call.as below

DwrService.populateProducts(someFunc);
function someFunc(result){
    autoProducts=result;
    input.autocomplete(result);
 }

here problem is everytime making a DWR call to DB to get the array!

is there any way to store the array from DWR in a global variable?

regards

Answer 1

Some thoughts:

• Where is counter initialized?
• Try leaving a space between the 'type' and 'name' attributes of your input tags, <input type='text' name='td_products... >, that might be preventing your startsWith attribute filter from matching anything.

Answer 2

The main issue i think is that you are calling the autocomplete outside of the click handler. So the autocompletion gets set up when the page loads, rather than when the button is clicked.

To resolve this, alter the code to read:

$(function() {

    $("#button_newproduct").click(function() {

        var newItem = $("<tr><td><input type='text'name='td_products["+counter+"]'/></td></tr>");

        $("#products_table > tbody").append(newItem); 

        var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" "); 
        newItem.find('input').autocomplete(data);

    });
});

Now the autocompletion is being set on each new item, rather than once, at the start.

Answer 3

You're adding a new input when you click #button_newproduct but you're only adding the autocomplete once in the function, outside the click.

Check jquery live

Answer 4

You need to add the autocomplete handler to each element as you add it. The elements that don't exist when you apply it on document load will never have it applied otherwise. Also, you'd be better off creating the row and input separately. By doing that you could just use the reference to the newly created input and use it with the autocomplete plugin.

$(function() {  

    $("#button_newproduct").click(function(){
         var input = $("<input type='text' name='td_products["+counter+"]' />");
         var row = $('<tr />').append( $('<td />').append(input) );  
         $("#products_table > tbody").append(row);
         var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" ");
         input.autocomplete(data);

    });
});