EasyAutocomplete 和输入宽度答案

【问题标题】：EasyAutocomplete and width of inputEasyAutocomplete 和输入宽度
【发布时间】：2019-03-18 21:48:49
【问题描述】：

当我将 behavior='autocomplete' 添加到我的输入字段时，宽度会发生变化，并且不再随着浏览器/屏幕大小的调整而缩放。

使用过 easyAutocomplete 的人有同样的问题吗？

非常感谢。

这个没有数据行为的代码是响应式的

  <form>
    <input class="form-control" type="text" placeholder="search">
  </form>

这个带有 data-behavior="autocomplete" 的代码不响应

  <form>
    <input class="form-control" type="text" placeholder="search" data-behavior="autocomplete">
  </form>

http://easyautocomplete.com - jQuery 自动完成插件

【问题讨论】：

你能输入你的代码吗？这将有助于更多地了解这个问题。
我添加代码。这段没有数据行为的代码是响应式的>

标签： javascript jquery autocomplete jquery-ui-autocomplete

【解决方案1】：

使用您的 jQuery easyautocomplete 插件，您只需将选项 adjustWidth 设置为 false，然后您就不需要触摸您的 CSS。

var options = {
  ...
  adjustWidth: false,
  ...
};

$("#example").easyAutocomplete(options);

【讨论】：

【解决方案2】：

您可以使用如下所示的简易自动完成功能，无需输入数据行为。此外，您需要覆盖由 easy-autocomplete 库应用的 CSS。

var options = {
 data: ["blue", "green", "pink", "red", "yellow"]
};

$("#example").easyAutocomplete(options);

.easy-autocomplete{
  width:100% !important
}

.easy-autocomplete input{
  width: 100%;
}

.form-wrapper{
  width: 500px;
}

<link href="https://unpkg.com/easy-autocomplete@1.3.5/dist/easy-autocomplete.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/easy-autocomplete@1.3.5/dist/jquery.easy-autocomplete.js"></script>

<form class="form-wrapper">
  <input id="example" class="form-control" type="text" placeholder="search">
</form>

【讨论】：

谢谢，但仍然没有响应。我需要数据行为，因为我实时从服务器获取结果，显然我无法获取所有数据（可能是 100000 行的表）并直接存储在选项变量中。
为了帮助你，我需要完整的代码覆盖CSS，这是用于响应和JS用于服务器数据加载。
非常感谢 dwij 你解决了我的问题。添加您的课程后，我删除了旧课程，现在可以正常工作了！！非常感谢。