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
It would appear that newElement hasn't been appended to the DOM, if this is the case then appending it (prior to calling autocomplete) should resolve your issue.