I'm trying to bind the jQuery UI autocomplete widget to a dynamically added input field. I've read some of the posts here, but none seem to help.
The code I'm using comes from Dynamically adding a form to a Django formset with Ajax and I've slightly modified it to bind the autocomplete.
However, the bind doesn't seem to be working. Whenever I type in the newly added field, the autocomplete box doesn't show. The code I am using follows:
function cloneMore(selector, type,field) {
var newElement = $(selector).clone(true);
var total = $('#id_' + type + '-TOTAL_FORMS').val();
newElement.find(':input').each(function() {
var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
var id = 'id_' + name;
if ($(this).attr('type') != 'hidden') {
$(this).val('');
}
$(this).attr({'name': name, 'id': id}).removeAttr('checked');
});
newElement.find('label').each(function() {
var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
$(this).attr('for', newFor);
});
total++;
$('#id_' + type + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
/* create the selector string and bind autocomplete */
var select_string = "#id_"+type+"-"+(total-1)+"-"+field;
$( select_string).autocomplete({
source: asset_universe_codes,
});
}
I have checked that the autocomplete source is accessible within the function, so I'm at a loss.
Can anyone help?
Thanks,
Jason