Новое текстовое поле перекрывается при реализации select2 с использованием Bootstrap и jQuery

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

Выньте класс form-control, примененный к тегу <input>, и он будет работать нормально.

Фрагмент с 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, из-за чего применяется Bootstrap CSS для form-control и, следовательно, беспорядок.Надеюсь, это поможет.