我正在使用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);
});
所有这些都按预期工作,但是一个新的文本字段与现有的文本字段重叠,下面给出了屏幕截图。
在这里,我需要将两个文本字段合并为一个。
答案 0 :(得分:0)
取出应用于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容器中,由于form-control
的Bootstrap CSS被应用,因此一团糟。希望这会有所帮助。