EasyAutocomplete和输入宽度

本文介绍了EasyAutocomplete和输入宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我将behavior ='autocomplete'添加到我的输入字段时，宽度正在改变，并且在浏览器/屏幕调整大小时不再缩放。

When I add behavior='autocomplete' to my input field, width is changing and not scaling anymore with browser/screen resize.

有经验的easyAutocomplete有一个人同样的问题？

Someone experienced with easyAutocomplete has the same problem?

非常感谢。

此代码没有数据行为是否有回应

This code without data-behavior IS RESPONSIVE

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

此代码包含data-behavior =autocomplete无效...

This code with data-behavior="autocomplete" is NOT RESPONSIVE

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

- jQuery自动完成插件

http://easyautocomplete.com - jQuery autocomplete plugin

推荐答案

您可以使用如下所示的easy-autocomplete，不需要放数据行为。
此外，您需要覆盖easy-autocomplete库应用的CSS。

You can use easy-autocomplete like below, no need to put data-behavior.Also, you need to override CSS applied by the easy-autocomplete library.

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/[email protected]/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/[email protected]/dist/jquery.easy-autocomplete.js"></script>

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

这篇关于EasyAutocomplete和输入宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！