dynamic - jquery auto complete for dynamically generated textboxes

Question

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

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.