Css 输入组插件内easyAutocomplete插件的宽度覆盖

我有一个表单中的输入框。我在这个输入框中使用easyautocomplete插件。当输入框位于输入组外时，输入框具有适当的宽度。但是，当我将其添加到输入组插件中时，宽度会减小/折叠。请参见屏幕截图

带有输入组插件的HTML

Javascript

当对上述javascript进行注释时，表单如下所示

我尝试过但没有成功的事情：

根据在选项中添加adjustWidth:false 根据和添加了内联CSS

---

很明显，EasyAutocomplete插件将这个插件包装到了一个额外的元素中。通过这种修改，它打破了正确输入组样式所必需的引导标记。不幸的是，我没有找到EasyAutocomplete控制如何更改DOM的选项

为了克服这个问题，我可以想出两个变通办法

您可以修改引导css以处理新标记。最简单的方法是将修改后的scss文件重新编译成新的css。然而，这也可能导致容易出错的结果。 然而，第二个选项是使用javascript进一步修改标记。 我认为后一种方法是更简单的方法，所以我在下面的例子中演示了这一点

//初始化易自动完成` var taskname选项={ 宽度：false， 数据：[蓝色、绿色、粉色、红色、黄色] }; $taskname.easyautompletetasknameoption； //固定标记 $'.easy autocomplete'.closest'.input group'.eachfunctioni，inputGroup{ $inputGroup.removeClass'input-group'； $autocomplete=$inputGroup.find'.easy autocomplete'； $inputGroup.find'.input group addon'.prependTo$autocomplete； $autocomplete.addClass'input-group'； }; .简易自动完成容器{ 最高：100%； } 任务名称 从自动建议中选择任务名称或键入自己的名称

---

事实上，这比那容易。 只需将类添加到初始值设定项。 例如：

---

如果我在一个页面上只有一个自动完成文本框，那么您的代码就可以完美地工作。当我有超过1个时，它不工作。有什么建议吗？我现在正在使用最新的稳定4.0版本的引导。

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

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

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

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