Anzeige Eingabeelemente von jquery Variable

Question

Ich arbeite an einem Projekt, wo Benutzer Datensätze hinzufügen können, auf der Seite hinzufügen Datensatz Benutzer hat 1 HTML-Formular mit 10 Feldern darin. Und eine Schaltfläche zum Hinzufügen weiterer Formulare mit allen 10 Feldern.

Jetzt haben 4 von 10 Felder Auto-Vervollständigen-Funktion von Bootstrap-Typehead, und die Typahead-Vorschläge arbeiten auf der Standard-1st-Form.

Das Problem kommt, wenn der Benutzer auf einem Add-mehr-Taste klicken neue Form verleiht ihm hergestellte Form in tatsächlich mit Jquery unter:

var wrapper = '<div class="span6"><input type="hidden" name="count[]" value="' + count + '"/><div class="widget-box"><div class="widget-title"> <span class="fa"> <i class="fa fa-info-circle"></i> </span> <h5>Add Parent - ' + count + '</h5><button type="button" class="btn btn-mini btn-danger" id="remove">Remove</button><button type="button" class="btn btn-mini btn-success" id="add">Add</button></div><div class="widget-content nopadding">'; 
    wrapper += '<div class="control-group"> <label class="control-label">First Name</label> <div class="controls"> <input class="span10" type="text" name="firstname[]" id="firstname"> </div></div>'; 
    wrapper += '<div class="control-group"> <label class="control-label">Last Name</label> <div class="controls"> <input class="span10" type="text" name="lastname[]" id="lastname"> </div></div>'; 
    wrapper += '<div class="control-group"> <label class="control-label">Gender</label> <div class="controls"> <select class="span10" name="gender[]" id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div></div>'; 
    wrapper += '<div class="control-group"> <label class="control-label">Email Address</label> <div class="controls"> <input class="span10" type="email" name="email[]" id="email"> </div></div>'; 
    wrapper += '<div class="control-group"> <label class="control-label">Password</label> <div class="controls"> <input class="span10" type="password" name="password[]" id="password" autocomplete="new-password"> </div></div>'; 

    //typeahead input comes here....... 

    wrapper += '</div></div></div>'; 
    $current_row.append(wrapper); 

der obige Code enthält nicht die typeahead-Eingänge, die ich wie vorher hatte unten:

wrapper += '<div class="control-group"> 
       <label class="control-label">Hobby</label> 
       <div class="controls"> 
        <input type="text" class="typeahead span10" name="hobby[]" id="hobby" data-provide="typeahead"> 
        <input type="hidden" name="hobbyid[]" id="hobbyid" value=""/> 
       </div> 
       </div>'; 

jetzt, wenn Benutzer klicken Sie auf weitere Felder hinzufügen, dann wird das Formular tatsächlich mit allen Eingabefeldern hinzugefügt bekommen, aber hier ist das Bootstrap-typeahead nicht funktionierte.

so habe ich den folgenden Code nach dem Lesen und Suchen auf GOOGLE versucht.

var hobby_typeahead = $('<input type="text" class="typeahead span10" name="hobby[]" id="hobby" data-provide="typeahead"> <input type="hidden" name="hobbyid[]" id="hobbyid" value=""/>'); 
$current_row.append(hobby_typeahead); 

danach begannen meine dynamischen Felder mir die Bootstrap-typeahead Vorschläge zeigen ..

Aber ich das Hauptproblem immer bin, ist die Eingabefelder unter dem Bootstrap div ex zu machen: Kontrollgruppe, Kontroll-Label und Kontrollen div.

Eigentlich unten Ich suche so etwas wie:

wrapper += '<div class="control-group"> 
       <label class="control-label">Hobby</label> 
       <div class="controls"> 
        '+ hobby_typeahead +' 
        <input type="hidden" name="hobbyid[]" id="hobbyid" value=""/> 
       </div> 
       </div>'; 

verstehe ich dieses Objekt gedruckt wird [Objekt] etc ..

ich wissen möchte, wie ich es in den divs befestigen konnte, ich kann es tun, indem sie so etwas wie dies zu erklären:

$control_group = $('<div class="control-group"></div>'); 

    $control_label = $('<label class="control-label">Hobby</label>'); 

    $controls = $('<div class="controls"></div>'); 
    $controls.append($hobby_typeahead); 

    $control_group.append($control_label); 
    $control_group.append($controls); 

    $current_row.append($control_group); 

Aber wie wir haben 4 Felder mit typeahead Vorschlag und 6 normale Felder, gibt es eine intelligente Art und Weise, es zu tun, ich will nicht gehen der lange Weg nach oben.

Vielen Dank im Voraus, jede Hilfe oder Anregung wäre wirklich eine große Hilfe für mich.

Answer 1

das ist, wie ich es erstellt, in meinen Augen zu passen, ist dies nicht die komplette Lösung in meiner Anforderung

ich mich anders und völlig in der Arbeitskopie muss passen, ich dachte, es Posting hier werde fügen Sie hilfreiche Ressourcen für andere hinzu.

var $span6 = $('<div class="span6"></div>'); 
    var $hidden_count = $('<input type="hidden" name="count[]" value="' + count + '"/>'); 
    var $widget_box = $('<div class="widget-box"><div class="widget-title"> <span class="fa"> <i class="fa fa-info-circle"></i> </span> <h5>Add User - ' + count + '</h5><button type="button" class="btn btn-mini btn-danger" id="remove">Remove</button><button type="button" class="btn btn-mini btn-success" id="add">Add</button></div>'); 
    var $widget_content = $('<div class="widget-content nopadding"></div>'); 

    $span6.append($hidden_count); 
    $span6.append($widget_box); 


    var $inputs = { 
     'First Name':'<input class="span10" type="text" name="firstname[]" id="firstname">', 
     'Last Name':'<input class="span10" type="text" name="lastname[]" id="lastname">', 
     'Gender':'<select class="span10" name="gender[]" id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select>', 
     'Email Address':'<input class="span10" type="email" name="email[]" id="email">', 
     'Password':'<input class="span10" type="password" name="password[]" id="password" autocomplete="new-password">', 
     'Hobbies':'<input type="text" class="typeahead span10" name="hobby[]" id="hobby" data-provide="typeahead">' 
    }; 


    for(var $k in $inputs){ 
     var $control_group = $('<div class="control-group"></div>'); 
     var $control_label = $('<label class="control-label">'+$k+'</label>'); 
     var $controls = $('<div class="controls"></div>'); 

     var $input = $($inputs[$k]); 
     $input.typeahead({ 
      source: function (query, process) { 
       return $.get('get-hobbies?src=typeahead&q='+query, function (data) { 
        return process(JSON.parse(data)); 
       }); 
      } 
     }); 
     $controls.append($input); 

     $control_group.append($control_label); 
     $control_group.append($controls); 
     $widget_content.append($control_group); 
    } 

    $span6.append($widget_content); 
    $current_row.append($span6);