Autocomplete not working when cloning an input field - php

Question

I'm cloning input fields on a table that have an autocomplete class. When I clone the fields I have no problem. The problem is that in the cloned fields, the autocomplete doesnt work (on the one that is not cloned it does work). My autocomplete code is this:
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone().prop('id', 'input' + newNum);
newElem.find(':input').each(function() {
var name = $(this).attr('name').replace(/\d+$/, '');
$(this).prop({id: name + newNum, name: name + newNum}).val("");
});
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
// enable the "remove" button
$('#btnDel').prop('disabled','');
// business rule: you can only add 15 names
if (newNum == 15)
$('#btnAdd').prop('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').prop('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').prop('disabled','disabled');
});
$('#btnDel').prop('disabled','disabled');
});
My Autocomplete code is :
var autoc = {
source: "lib/search.php",
minLength: 1,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
};
var renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a style='height:75px; text-align:center; font-weight:bold;'>"+ item.label + "</a>" )
.appendTo( ul );
};
$(".member").each(function (i) {
$(this).autocomplete(autoc).data("autocomplete")._renderItem = renderItem;
});
I've been trying to fix it by putting the autocomplete code inside of the clone code, Im not sure what Im doing wrong. It would be great if somebody could help! Thanks!

Answer 1

You have to reinitialize the autocomplete field after it's been cloned. And I think wrapping it within .live() is necessary as well
My solution to this was something like this:
$('#my_clone_button').live('click',function() {
my_clone_script; #this is my function to clone
$('select your new cloned input').each(function() {
$(this).autocomplete('destroy');
enable_autocomplete($(this), json_url); #this is my function to initialize autocomplete
});
});

Answer 2

try $('#input' + num).clone(true) passing true tells the clone to copy the events and data also. This means that it will copy that the input is a autocomplete field.