элементы ввода ввода из переменной jquery

Question

Я работаю над проектом, в котором пользователь может добавлять записи, на странице добавления записей пользователь имеет 1 html-форму с 10 полями в ней. И кнопку для добавления дополнительных форм со всеми 10 полями.

Теперь у 4 из 10 полей есть функция автонастройки bootstrap typeahead, а предложения typeahead работают с 1-й формой по умолчанию.

Проблема возникает, когда пользователь добавляет новую форму на надстройку дополнительной кнопки мыши, форма в действительности получена с использованием JQuery ниже:

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

приведенными выше код не включает машинописные входы, которые у меня были раньше, как ниже:

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.

На самом деле я ищу что-то вроде ниже:

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

Но поскольку у меня есть 4 поля с машинописным внушением и 6 нормальных полей, есть ли умный способ сделать это, я не хочу идти длинный путь выше.

Заранее спасибо, любая помощь или предложение действительно помогут мне.

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