Question

我遇到了bootstrap自动完成/ jquery自动完成的问题。

例如，我将其分配给模型外部和内部的字段。

如果我点击模态外的字段，那么打开的自动完成就是字段的整个宽度，这是我需要的结果。问题出现在模态内的相同情况中。

如果我打开模态并单击该字段，则打开的自动完成不是字段的整个宽度。如果我选择其中一个值，那么下次自动完成将是其他的。

我如何在模态中获得自动完成作为场外的整个宽度作为模态外的示例？

这是一个jsfiddle：http://jsfiddle.net/rns3hang/181/

我的代码：

<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
               <input type="text" class="form-control" id="tokenfield2" value="red,green,blue" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

$(document).ready(function() {   
    $('#tokenfield').tokenfield({
      autocomplete: {
        source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
        delay: 100
      },
      showAutocompleteOnFocus: true
    });

    $('#tokenfield2').tokenfield({


         autocomplete: {
            source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
            delay: 100
          },
          showAutocompleteOnFocus: true
        });
    });

.ui-autocomplete,
.ui-front {
  z-index: 1059;
}

.ui-autocomplete {

}

模态内的Bootstrap自动完成具有错误的宽度

0 个答案: