Question

我正在开发一个用户可以添加记录的项目，在添加记录页面上，用户有1个html表单，其中包含10个字段。还有一个按钮，可以添加所有10个字段的更多表单。

现在，10个字段中有4个具有bootstrap typeahead的自动完成功能，并且typeahead建议适用于默认的1st表单。

问题出现在用户在添加更多按钮上添加新表单时，使用下面的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>';

现在，当用户点击添加更多字段时，表单实际上会添加所有输入字段，但这里bootstrap typeahead没有用。

所以我在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);

在此之后，我的动态字段开始向我显示bootstrap typeahead建议..

但是，我得到的主要问题是在bootstrap div ex：control-group，control-label和controls 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>';

我明白这会打印对象[Object]等。

我想知道，我如何将它附加在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);

显示来自jquery变量

1 个答案: