轻量、便捷、令人惊艳的自动补全插件！

大家好，我是「前端实验室」爱分享的了不起~

自动补全插件是现代网页应用中不可或缺的一部分。了不起昨天刚完成了一项输入部分内容，立即自动补全内容的功能。

这里为大家分享我使用的自动补全插件: Awsomplete，并深入探讨它的使用方法和强大功能。

简介

Awsomplete是一款简洁而强大的自动补全插件。它具有高效的性能和用户友好的界面，适用于各种网页应用。

特点

关于自动补全，你一定听说过其他的解决方案，如 jQuery UI Autocomplete，但这样的方案实在是太笨重了。

Awsomplete却别具一格，拥有如下特征：

轻量级：Awsomplete非常轻量，压缩版本只有约2KB，这使得它成为一个理想的选择，即使在网络速度较慢的情况下也能保证快速加载和响应。
简单易用：Awsomplete提供简单而直观的API，使得开发者可以很容易地集成到他们的应用中。只需几行代码，即可实现自动补全功能。
定制性强：Awsomplete提供了多种选项和自定义功能，开发者可以定制插件的外观和行为，以适应不同的设计需求。
支持键盘导航：Awsomplete支持键盘导航，用户可以使用上箭头和下箭头来浏览自动补全选项，并通过回车键选中所需选项。
多个数据源：Awsomplete支持多个数据源，开发者可以从不同的地方提取数据，并将其用于自动补全功能。

基本使用

在使用Awsomplete前，必须引入必要文件：awesomplete.css 和 awesomplete.js。

代码语言：javascript复制

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

接着创建输入框：在HTML中创建一个输入框，用于用户输入。

代码语言：javascript复制

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

这是最简单的用法，已经完成啦！任何JS都不需要了~

ps:注意标签中的 class 类名 awesomplete，和 data-list 属性的使用！

由于data-list 属性不是所有的浏览器都支持，且上面的使用方式不够动态化，我们需要定制我们自动补全的代码。

进阶使用

在进阶的使用过程中，我们首先要初始化插件。重新来个例子。

代码语言：javascript复制

<input id="myinput" />
<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>

使用JavaScript初始化Awsomplete插件，并将输入框作为参数传入。

代码语言：javascript复制

var input = document.getElementById("myinput");
new Awesomplete(input, {list: document.querySelector("#mylist")});

关于初始化的数据，我们也可以使用数组来表示。

代码语言：javascript复制

new Awesomplete(input, {
 list: ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"]
});

这时，我们使用的是元素选择器来指向我们要控制的html元素，方便多了！

设置选项和方法这个部分才是我们定制化的主要配置。

Awsomplete 提供了几个基本属性：minChars ， maxItems和autoFirst。用于触发自动补全的最少字符设置，自动补全可选条目数等。

代码语言：javascript复制

var awesomplete = new Awesomplete(input, {
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});

另外还有其他扩展属性。了不起在实践中用到了下面这几个。

replace属性控制用户的选择如何替换用户的输入。

[这个功能很重要!] 看看这个例子。

代码语言：javascript复制

new Awesomplete(input, {
 list: [
  { label: "Belarus", value: "BY" },
  { label: "China", value: "CN" },
  { label: "United States", value: "US" }
 ],
 // insert label instead of value into the input.
 replace: function(suggestion) {
  this.input.value = suggestion.label;
 }
});

备选的数据可以是对象，你可以自定义自动补全的数据是对象中的某个属性——这样呈现的数据更灵活！

filter属性控制条目的匹配方式。

代码语言：javascript复制

function myFilterFunc(text, input) {
  return text.indexOf(input) > -1;
}
var awesomplete = new Awesomplete(input, {
  filter: myFilterFunc
});

sort属性控制列表项的排序方式。

它的回调与Array.prototype.sort（）函数具有相同的原型。

代码语言：javascript复制

function mySortFunc(text, input) {
  return text < input;
}
var awesomplete = new Awesomplete(input, {
  sort: mySortFunc
});

其他

Awsomplete 还提供了其他关于事件监听的方法和API。这里就不一一例举了。大家访问下方地址进行查阅吧！

官方地址：https://projects.verou.me/awesomplete/

input 插件对象开发者数据

0 人点赞