使用Bootstrap和jQuery实现select2时，新的文本字段重叠

Question

我正在使用select2插件通过jQuery进行自动提示，但它在现有文本字段上添加了一个新文本字段。 我在下面提供我的代码。

<div class="col-md-3 form-group">
   <div class="">
      <label class="control-label go-right">Select City</label>
    </div>
    <input type="text" id="currentlocationlist" class="form-control">
</div>


$("#currentlocationlist").select2({
          placeholder:'Enter location name',
          minimumInputLength: 3,
          width:'100%',
          maximumSelectionSize: 1,
          initSelection:function(element, callback){
            var data = {id: "1", text: " "};
            callback(data);
          },
          ajax:{
            url: "<?php echo base_url(); ?>admin/ajaxcalls/locationsList",
            dataType: 'json',
            data: function (term, page) {
              return {
                query: term, // search term
              };
            },
            results: function (data, page) {
              return {results: data};
            }
          }
        })
        $("#currentlocationlist").on("select2-selecting", function(e) {
          $("#currentlocationlist").val(e.val);
        });

此处所有功能均按预期工作，但是一个新文本字段与现有文本字段重叠，下面给出了屏幕截图。

在这里，我需要将两个文本字段合并为一个。

Answer 1

取出应用于<input>标记的类form-control ，它将正常工作。

具有form-control类的代码段：

 $('#currentlocationlist').select2({ width: '100%', allowClear: true, multiple: true, maximumSelectionSize: 1, placeholder: "Click here", data: [ { id: 1, text: "Ford" }, { id: 2, text: "Dodge" }, { id: 3, text: "Mercedes" }, { id: 4, text: "Jaguar" } ] }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/select2/3.4.8/select2.css"> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script> <div class="col-md-3 form-group"> <div class=""> <label class="control-label go-right">Select City</label> </div> <input type="text" id="currentlocationlist" class="form-control"> </div> 

这是一个没有 form-control的代码段：

 $('#currentlocationlist').select2({ width: '100%', allowClear: true, multiple: true, maximumSelectionSize: 1, placeholder: "Click here", data: [ { id: 1, text: "Ford" }, { id: 2, text: "Dodge" }, { id: 3, text: "Mercedes" }, { id: 4, text: "Jaguar" } ] }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/select2/3.4.8/select2.css"> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script> <div class="col-md-3 form-group"> <div class=""> <label class="control-label go-right">Select City</label> </div> <input type="text" id="currentlocationlist" class=""> </div> 

这是因为您分配给要用来初始化select2的元素的类被添加到select2容器内呈现的select2-容器中，这归因于form-control的Bootstrap CSS被应用，从而造成混乱。 希望这可以帮助。