css - 输入组插件中easyAutocomplete插件的宽度覆盖

Question

我有一个表单中的输入框。我在这个输入框中使用了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");
    }
  }
};

当上面的javascript被注释时，表单如下所示


我尝试过的事情(但没有用):

添加 adjustWidth: false在根据 Github 的选项中

已添加 inline CSS 按照 SO和 SO

Answer 1

实际上比这更容易。
只需将类添加到初始值设定项。
例子:

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