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\")

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.

Answer 2

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

    });
});

Answer 3

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 4

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 5

The simplest way is to use:

$( ".some" ).autocomplete({source: data});

inside the javascript function who generates the new element.