input-group-addon 内 easyAutocomplete 插件的宽度覆盖

Question

我在表单中有一个输入框。我在这个输入框中使用了 easyautocomplete 插件。当我在 input-group-addon 之外输入框时，输入框具有适当的宽度。但是，当我将它添加到 input-group-addon 内时，宽度为 reduced/collapsed。（见截图）

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");
    }
  }
};

当上面的javascript被注释时，表格看起来如下

我尝试过的事情（但没有奏效）：

根据Github

adjustWidth: false

根据 and

inline

Answer 1

显然，EasyAutocomplete 插件将 <input class="form-control"> 包装到一个额外的 <div class="easy-autocomplete"> 元素中。通过该修改，它破坏了正确 input-group 样式所需的 Bootstrap 标记。不幸的是，我没有找到 EasyAutocomplete 的选项来控制它如何更改 DOM.

为了克服这个问题，我可以想到两个解决方法。

您可以修改 Bootstrap css 来处理新标记。最简单的方法是将修改后的 scss 文件重新编译成新的 css。然而，这也可能导致容易出错的结果。
然而，第二个选项是进一步修改标记 javascript。

我认为后者是最简单的方法，因此我在下面的示例中进行了演示。

// 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');
});

.easy-autocomplete-container {
    top: 100%;
}

<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>

根据您的初始标记，我猜您使用的是 Bootstrap 4 Beta 2。重要的是要注意 Beta 3 可用，更改也包括输入组组件的样式。因此，对于最新的测试版，标记和“重置”脚本如下所示。

// 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');
});

.easy-autocomplete-container {
    top: 100%;
}

<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>

注意：正如您在示例中看到的，仍然需要为 EasyAutocomplete 选项设置 adjustWidth: false。此外，还修复了 class .easy-autocomplete-container 以正确显示的问题。

Answer 2

实际上比那更容易。只需将类添加到初始化程序即可。示例：

var options = {
    data: ["Cyclops", "Storm", "Mystique", "Wolverine", "Professor X", "Magneto"],
    theme: "dark", **cssClasses: 'col'**
};
$("#theme").easyAutocomplete(options);

input-group-addon 内 easyAutocomplete 插件的宽度覆盖

Width override of easyAutocomplete plugin inside input-group-addon

css

twitter-bootstrap

bootstrap-4

easyautocomplete