我在表单中有一个输入框。我在这个输入框中使用easyautocomplete插件。当我在input-group-addon
外面有输入框时,输入框的宽度适当。但是,当我在input-group-addon
中添加它时,宽度会减小/折叠。 (见截图)
HTML input-group-addon
<div class="form-group col-md-9">
<label for="taskname">Task Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="fas fa-anchor"></i></span>
<input class="form-control" id="taskname" name="taskname" required autocomplete="off" maxlength="50" placeholder="Name" value="<?php echo h($dataset['taskname']); ?>">
</div>
<small class="form-text text-muted">Select Task name from auto suggestion or type your own </small>
</div>
HTML 没有 input-group-addon
<div class="form-group col-md-9">
<label for="taskname">Task Name</label>
<input class="form-control" id="taskname" name="taskname" required autocomplete="off" maxlength="50" placeholder="Name" value="<?php echo h($dataset['taskname']); ?>">
<small class="form-text text-muted">Select Task name from auto suggestion or type your own </small>
</div>
的Javascript
$("#taskname").easyAutocomplete(tasknameoption);
var tasknameoption = {
url: "/task/tasklistapi.php",
getValue: "tasklistname",
adjustWidth: false,
requestDelay: 500,
list: {
maxNumberOfElements: 10,
match: {enabled: true},
onSelectItemEvent: function() {
var value = $("#taskname").getSelectedItemData().iscomp;
$("#iscomp").val(value).trigger("change");
}
}
};
我尝试过的事情(但没有奏效):
答案 0 :(得分:3)
实际上,这要容易得多。 只需将类添加到初始化程序。 示例:
var options = {
data: ["Cyclops", "Storm", "Mystique", "Wolverine", "Professor X", "Magneto"],
theme: "dark", **cssClasses: 'col'**
};
$("#theme").easyAutocomplete(options);
答案 1 :(得分:1)
显然,EasyAutocomplete插件将<input class="form-control">
包装到另一个<div class="easy-autocomplete">
元素中。通过该修改,它打破了正确input-group
样式所需的Bootstrap标记。不幸的是,我没有找到EasyAutocomplete的选项来控制它如何更改 DOM 。
为了克服这个问题,你有两个我能想到的解决方法。
我认为后者更容易实现,所以我在下面的例子中证明了这一点。
// Init `easyAutocomplete`
var tasknameoption = {
adjustWidth: false,
data: ["blue", "green", "pink", "red", "yellow"]
};
$("#taskname").easyAutocomplete(tasknameoption);
// Fixing markup
$('.easy-autocomplete').closest('.input-group').each(function(i, inputGroup) {
$(inputGroup).removeClass('input-group');
$autocomplete = $(inputGroup).find('.easy-autocomplete');
$(inputGroup).find('.input-group-addon').prependTo($autocomplete);
$autocomplete.addClass('input-group');
});
&#13;
.easy-autocomplete-container {
top: 100%;
}
&#13;
<div class="form-group col-md-9">
<label for="taskname">Task Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-anchor"></i></span>
<input class="form-control" id="taskname" name="taskname" required autocomplete="off" maxlength="50" placeholder="Name">
</div>
<small class="form-text text-muted">Select Task name from auto suggestion or type your own </small>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.js"></script>
&#13;
根据您的初始标记,我猜您使用的是Bootstrap 4 Beta 2 。请务必注意 Beta 3 ,并且更改也包括输入组组件的样式。因此,对于最新的beta版本,标记和“重置”脚本将如下所示。
// Init `easyAutocomplete`
var tasknameoption = {
adjustWidth: false,
data: ["blue", "green", "pink", "red", "yellow"]
};
$("#taskname").easyAutocomplete(tasknameoption);
// Fixing markup
$('.easy-autocomplete').closest('.input-group').each(function(i, inputGroup) {
$(inputGroup).removeClass('input-group');
$autocomplete = $(inputGroup).find('.easy-autocomplete');
$(inputGroup).find('.input-group-prepend').prependTo($autocomplete);
$autocomplete.addClass('input-group');
});
&#13;
.easy-autocomplete-container {
top: 100%;
}
&#13;
<div class="form-group col-md-9">
<label for="taskname">Task Name</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">
<i class="fa fa-anchor"></i>
</span>
</div>
<input class="form-control" id="taskname" name="taskname" required autocomplete="off" maxlength="50" placeholder="Name" aria-describedby="basic-addon1">
</div>
<small class="form-text text-muted">Select Task name from auto suggestion or type your own </small>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.js"></script>
&#13;
注意:正如您在示例中所看到的,仍然需要为EasyAutocomplete选项设置adjustWidth: false
。此外,还有一个正确显示的课程.easy-autocomplete-container
。