automatische Vervollständigung nicht auf geklonten divs Arbeits

Question

ich die automcomplete JS sowie die Daten für die die automatische Vervollständigung aufgenommen haben

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.autocomplete.min.js"></script> 

$("#button").click(function(){ 
    $("#taskform").clone().appendTo("#taskform"); 
}); 

$(function(){ 
    var staffnames = [ 
    { value: 'Stephen', data: 's1' }, 
    { value: 'Klay', data: 's2' }, 
    { value: 'Draymond', data: 's3' }, 
    { value: 'Andre', data: 's4' }, 
    { value: 'Harrison', data: 's5' }, 
    { value: 'LeBron', data: 's6' }, 
    ]; 

    $('#staffsearch').autocomplete({ 
    lookup: staffnames, 
    }); 
} 

Hier ist mein HTML

<form> 
    <div id="taskform"> 
    <input type="text" class="form-control input-sm font11" placeholder="Staff" name="staff" id="staffsearch" value=""> 
    </div> 
    <input type="button" class="btn btn-info input-sm font11 addanother" onlick="duplicate()" id="button" value="Add Another Staff"> 
</form> 

Die zur automatischen Vervollständigung zunächst funktioniert. Aber wenn ich es kloniere, funktioniert die automatische Vervollständigung des geklonten div/input nicht, obwohl die automatische Vervollständigung des Originals immer noch funktioniert.

Wahrscheinlich haben mit der gleichen ID für den ursprünglichen und geklonten Eingang zu tun? Ich bin mir nicht sicher, wie ich damit umgehen soll.

Jede Hilfe wird sehr geschätzt.

B

Answer 1

Vielleicht mißverstanden ich aber wollen Sie so etwas wie die:

https://jsfiddle.net/ye1uzwmg/1/

var staffnames = [{ 
    value: 'Stephen', 
    data: 's1' 
    }, { 
    value: 'Klay', 
    data: 's2' 
    }, { 
    value: 'Draymond', 
    data: 's3' 
    }, { 
    value: 'Andre', 
    data: 's4' 
    }, { 
    value: 'Harrison', 
    data: 's5' 
    }, { 
    value: 'LeBron', 
    data: 's6' 
    }, ]; 

$("#button").click(function() { 
    $("#taskform").find("input[type='text']").last().clone().val('').appendTo("#taskform").autocomplete({ 
    source: staffnames, 
    }); 
}); 

$(function() { 
    $('.staffauto').autocomplete({ 
    source: staffnames, 
    }); 
});