EasyAutocomplete 和输入宽度

Question

当我将 behavior='autocomplete' 添加到我的输入字段时，宽度正在改变并且不再随着 browser/screen 调整大小而缩放。

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

非常感谢。

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

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

此代码的数据行为="autocomplete" 没有响应

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

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

Answer 1

您可以像下面这样使用easy-autocomplete，无需放置data-behavior。此外，您需要覆盖 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>

Answer 2

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

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

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

EasyAutocomplete 和输入宽度

EasyAutocomplete and width of input

javascript

jquery

autocomplete

jquery-ui-autocomplete