JQuery autocompleter for dynamic input boxes

Question

I have a webpage with jquery generating dynamic html input boxes.

Something like this appears on the page.

<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>

These text-boxes all use the same autocompleter, is it possible in jQuery to point my autocompleter at all of these?

Answer 1

First of all id should be unique in the whole document so your code is not correct.

What you probably mean is

<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>

To enable autocomplete on those boxes just use the selector that will match them all

var data = "foo bar baz";
$('input[name^=numbers]').autocomplete(data);

Answer 2

hi,

i have the similar situation. generating text boxes dynamically. however when i tried to have autocomplete on all of them they are not getting effected.

if i try the same technique with 1 or 2 hard coded text boxes it's 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);

});

can you please tell me what went wrong in my case?

Answer 3

You could add a div that wraps input and that is never changed, then upon creation of new input store its id in jquery internal cache, just like this:

var $input = '<input name=somename[] type="text"/>';    
$('#mywrap').append($input);
$input.data('id', 'some id');

Then on you can access autocompleter in the following way:

$('#mywrap input').live('click', function() {
    var id = $(this).data('id');
    // and now do anything with the new id you have!
});