[英]New text field is overlapped while implementing select2 using Bootstrap and jQuery
我正在使用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);
});
此處所有功能均按預期工作,但是一個新文本字段與現有文本字段重疊,下面給出了屏幕截圖。
在這里,我需要將兩個文本字段合並為一個。
取出應用於<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被應用,從而造成混亂。 希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.