README

https://leaverou.github.io/awesomplete/

Awesomplete 是一个超轻量级、可定制的简单自动完成小部件，无依赖，采用现代标准为现代浏览器构建。

安装

有多种方式获取所需文件。以下是两种方法之一

1. CDN 服务器

https://cdnjs.com/libraries/awesomplete

1. 另一种启动运行的方法是使用 yarn 或 npm

yarn add awesomplete

npm install awesomplete --save

有关 npm 包的更多信息，请参阅此处。

基本用法

在尝试任何操作之前，您需要通过通常的标签将 awesomplete.css 和 awesomplete.js 包含到您的页面中

<link rel="stylesheet" href="awesomplete.css" />
<script src="awesomplete.js" async></script>

然后，您可以通过添加以下输入标签来添加 Awesomplete 小部件

<input class="awesomplete"
       data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />

添加 class="awesomplete" 以自动处理它（您仍然可以通过 HTML 属性指定许多选项）。否则，您可以通过几行 JS 代码创建实例，这允许进行更多定制。

有许多方式可以将输入与建议列表关联起来。上面的简单示例也可以使用以下标记创建，它提供了当脚本未加载时的良好原生回退

<input class="awesomplete" list="mylist" />
<datalist id="mylist">
	<option>Ada</option>
	<option>Java</option>
	<option>JavaScript</option>
	<option>Brainfuck</option>
	<option>LOLCODE</option>
	<option>Node.js</option>
	<option>Ruby on Rails</option>
</datalist>

或者以下内容，如果您不想使用 <datalist>，或者如果您不想使用 IDs（因为任何选择器都会在 data-list 中工作）

<input class="awesomplete" data-list="#mylist" />
<ul id="mylist">
	<li>Ada</li>
	<li>Java</li>
	<li>JavaScript</li>
	<li>Brainfuck</li>
	<li>LOLCODE</li>
	<li>Node.js</li>
	<li>Ruby on Rails</li>
</ul>

在 JS 中可以实例化许多自定义化和属性。库和属性的定义在下面的链接中可用。

选项

许可证

Awesomplete 在 MIT 许可证下发布。有关详细信息，请参阅LICENSE 文件。

链接

该库的官方网站为 https://leaverou.github.io/awesomplete/。

API 和其他主题的文档在 https://leaverou.github.io/awesomplete/#api。

由 Lea Verou 和其他出色的贡献者创建。