jquery変数の入力要素を表示する

Question

私は、レコードを追加できるプロジェクトで作業しています。レコードの追加ページのユーザーには、10個のフィールドがある1つのhtmlフォームがあります。 10個のフィールドすべてにフォームを追加するボタン。

ここで、10フィールドのうち4フィールドには、ブートストラップ先読み機能の自動完了機能があり、先読みの提案はデフォルトの第1フォームで機能します。

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); 

上記のコードは、私が以前のように持っていた先行入力の入力が含まれていません。ユーザーはアドオンよりボタンのクリックで新しいフォームを追加したとき

問題が来る、実際のフォームは下のjqueryのを使用して製造しました以下の下：ユーザーが複数のフィールドを追加するをクリックすると、

今

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>'; 

、その後、フォームは実際にはすべての入力フィールドに追加されますが、ここでは、ブートストラップ先行入力が働いていませんでした。

だから私はGOOGLEで読んで、検索した後、以下のコードを試しました。この後

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); 

、私のダイナミックなフィールドは私に、ブートストラップ先行入力の提案を示し始め..

しかし、私は取得しています主な問題は、ブートストラップのdiv元の下の入力フィールドをレンダリングすることです：コントロールグループコントロールラベルとコントロールdiv。

は、実際に私は以下のようなものを探しています：私はこれがなど[オブジェクト]をオブジェクトを印刷します理解

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>'; 

を...

私はのdivの中にそれを添付することができるか、知りたいのですが、私はこのような何か宣言することにより、それを行うことができます：

$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); 

をしかし、私は先行入力提案し、6つの通常のフィールドを持つ4つのフィールドを持っているとして、それを行うための任意のスマートな方法があり、私は行きたくありません長い道のり。

ご協力いただきありがとうございました。私の助けや助言があれば、本当に助かります。

Answer 1

これが私の目に合うように、私はそれを作成する方法で、これは私の要件に

に合った完全なソリューションではありません、私は私と一緒に異なる、完全に作業コピーを持って、私は、ここでそれをします投稿と思いました他の人に役立つリソースを追加してください。

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);