使用Awesomplete构建JavaScript自动完成小部件

史淳

2023-12-01

自动完成功能是Web应用程序中的一项功能，可在用户仍在键入时预测单词或句子的其余部分。用户通常按Tab键接受建议，或按向下箭头键接受以下一项。

在本教程中，我们将研究如何使用Awesomplete JavaScript库在我们的网站中创建自动完成的小部件。 Awesomplete由Lea Verou创建，他是W3C CSS工作组的知名演讲者，作家和受邀专家。

为什么不使用HTML5 `datalist`元素？

HTML5数据列表元素可能是在网站中实现自动完成功能的最简单方法。不幸的是，浏览器对此元素的支持是有限的，并且其实现也不一致（例如Chrome仅从一开始就匹配，Firefox在任何地方都匹配）。也无法根据您网站的设计对其进行样式设置，尽管很有希望，但这可能不是正确的选择。

另一方面，Awesomplete是一种超轻量级的，可自定义的自动完成小部件，您可以将其放入页面中。它具有零依赖性（没有jQuery），可在所有现代浏览器上使用，并可根据您网站的主题设置样式。

那么，我们还等什么呢？让我们潜入吧！

在您的网页中包含Awesomplete

要使用Awesomplete库，我们需要两个文件： awesomplete.css和awesomplete.js 。

您可以使用bower获得这些：

bower install https://github.com/LeaVerou/awesomplete.git#gh-pages

通过直接从Awesomplete网站下载它们。

或者，通过RawGit CDN包含它们（该CDN直接从GitHub提供带有正确Content-Type标头的原始文件）。如下所示。

要实例化基本小部件，您需要一个具有awesomplete类的input元素，然后是awesomplete元素中的awesomplete选项。输入元素的list属性必须与数据list元素的id相匹配。这是明智的默认配置，因为它为所有禁用JavaScript的用户提供了一个后备。

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css">
  </head>
  <body>
    <input class="awesomplete" list="mylist" />
    <datalist id="mylist">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </datalist>

    <script src="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.min.js"></script>
  </body>
</html>

基本功能

有很多使用这种通用库的方法。让我们从一个基本的用例开始。

使用`data-list`属性

可以将选项从上述数据data-list元素移动到输入元素本身的data-list属性中。

<input class="awesomplete"
       data-minchars="1"
       data-maxitems="5"
       data-list="China, India, Japan, Russia, UK, USA" />

见笔Awesomplete（1）由SitePoint（ @SitePoint上） CodePen 。

使用JavaScript

如果您的自动完成选项是静态的，则上述解决方案很有用。然而。为了动态创建列表并进一步自定义自动完成小部件的行为，我们需要一个JavaScript方法。

<input id="countries" />

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

在这里，我们正在创建一个Awesomplete对象， Awesomplete传递两个参数：一个对我们输入元素的引用，以及一个包含配置选项的对象文字。

然后，我们将Awesomplete对象的list属性分配给一个包含自动完成选项列表的数组。在下面的演示中，我使用了方便的代码段扩展了国家名称的数组。

另外，请注意， minChars ， maxItems和autoFirst属性与上一个演示中的data-minchars ， data-maxitems和data-autofirst属性相同。

见笔Awesomplete（2）由SitePoint（ @SitePoint上） CodePen 。

使用JavaScript实例化自动完成窗口小部件时，我们可以访问许多其他属性， API和事件。让我们看看它们是如何使用它们的？

扩展的JavaScript属性

Awesomplete对象还支持其他四个属性。它们是： filter ， sort ， item和replace 。这四个属性具有分配给它们的功能。

filter属性控制条目的匹配方式。它的回调函数有两个参数：当前建议文本（因此在我们的示例中，值“ China”，“ India”，“ Japan”，“ Russia”，“ UK”，“ USA”中的每个依次）和包含以下内容的字符串用户的输入。默认情况下，输入可以匹配字符串中的任何位置，并且是不区分大小写的匹配。

下面的示例演示如何使Awesomplete执行区分大小写的匹配：

function myFilterFunc(text, input) {
  return text.indexOf(input) > -1;
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  filter: myFilterFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

sort属性控制列表项的排序方式。它的回调与Array.prototype.sort（）函数具有相同的原型。

这是您使用它以反向字母顺序对匹配项进行排序的方式：

function mySortFunc(text, input) {
  return text < input;
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  sort: mySortFunc
});
awesomplete.list = ['Albania', 'Brazil', 'Chile', 'Denmark', 'Egypt'];

item属性控制列表项的生成方式。该回调也有两个参数：当前建议文本和用户输入。它应该返回一个列表项。这是您使用item属性突出显示建议文本中用户输入的方法：

function myItemFunc(text, input){
  return Awesomplete.$.create("li", {
    innerHTML: text.replace(RegExp(input.trim(), "gi"), "<mark>$&amp;</mark>"),
    "aria-selected": "false"
  });
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  item: myItemFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

第四个也是最后一个属性是replace属性。 replace属性控制用户的选择如何替换用户的输入。与前面的三个函数相比，此回调采用一个参数：所选选项的文本。当用户选择建议的选项之一（例如，通过单击它）时，将触发该事件。

这是使用它将用户的选择转换为大写字母的方式：

function myReplaceFunc(text) {
  input.value = text.toUpperCase();
}

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  replace: myReplaceFunc
});
awesomplete.list = ['Albania', 'Brazil', 'Chile', 'Denmark', 'Egypt'];

绑在一起

这是一个演示，演示了如何将filter和item功能组合在一起，以便仅在用户输入指定字符（在这种情况下为逗号后跟空格）的情况下提出建议：

见笔Awesomplete（3）由SitePoint（ @SitePoint ）上CodePen 。

深入探讨-事件，API和Ajax

此库激发了五个自定义事件。它们是： awesomplete-select ， awesomplete-selectcomplete ， awesomplete-open ， awesomplete-close和awesomplete-highlight 。

这是您如何陷入以下每个事件的方式：

window.addEventListener("awesomplete-select", function(e){
  // User made a selection from dropdown. 
  // This is fired before the selection is applied
}, false);

window.addEventListener("awesomplete-selectcomplete", function(e){
  // User made a selection from dropdown. 
  // This is fired after the selection is applied
}, false);

window.addEventListener("awesomplete-open", function(e){
  // The popup just appeared.
}, false);

window.addEventListener("awesomplete-close", function(e){
  // The popup just closed.
}, false);

window.addEventListener("awesomplete-highlight", function(e){
  // The highlighted item just changed 
  // (in response to pressing an arrow key or via an API call).
}, false);

Awesomplete在Awesomplete对象上提供了多种方法，可让您自定义其行为：

open() ：用于打开弹出窗口。
close() ：用于关闭弹出窗口。
next() ：用于突出显示弹出窗口中的下一项。
previous() ：用于突出显示弹出窗口中的上一项。
goto(i) ：用于在弹出窗口中高亮显示索引为i的项目（-1取消全选）。
select() ：用于选择当前突出显示的项目，将其替换为文本字段的值，然后关闭弹出窗口。
evaluate() ：用于评估窗口小部件的当前状态并重新生成建议列表。如果没有可用的弹出窗口，则将其关闭。如果在打开弹出窗口时动态设置list属性，则此方法特别有用。

注意：在触发输入事件之前， open()当前不会打开列表，但是项目主页上有一个pull请求，应该可以解决此问题。

结局

作为最后一个示例，这就是将Awesomplete与通过Ajax从远程API获取的数据结合使用的方式。我将使用REST国家API ，它为用户提供大量的国家数据。

首先要做的是在不设置其list属性的情况下初始化该小部件（为了简洁起见，我在这里使用jQuery）：

var input = $("#countries");
var awesomplete = new Awesomplete(input, {
  minChars: 1,
  autoFirst: true
});

然后，附加一个keyup事件侦听器：

$(input).on("keyup", function(){ ... }

当用户按下一个键时，我们需要获取输入元素的值并发出请求：

$.ajax({
  url: 'https://restcountries.eu/rest/v1/name/' + this.value,
  type: 'GET',
  dataType: 'json'
})

在成功回调中，我们可以遍历JSON响应，获取各个城市的名称，并动态设置Awesomplete对象的list属性：

.success(function(data) {
  var list = [];
  $.each(data, function(key, value) {
    list.push(value.name);
  });
  awesomplete.list = list;
});

就是这样！

请参阅CodePen上SitePoint （ @SitePoint ）的Pen Awesomplete（4）。

结论

在本教程中，我们已经看到了使用轻量级和可自定义的Awesomplete库在项目中实现自动完成小部件的难易程度。该项目仍在积极维护中，我建议您检查一下。

From: https://www.sitepoint.com/javascript-autocomplete-widget-awesomplete/

使用Awesomplete构建JavaScript自动完成小部件

为什么不使用HTML5 `datalist`元素？

在您的网页中包含Awesomplete

基本功能

使用`data-list`属性

使用JavaScript

扩展的JavaScript属性

绑在一起

深入探讨-事件，API和Ajax

结局

结论

相关阅读

相关文章

相关问答

相关文档

使用Awesomplete构建JavaScript自动完成小部件

为什么不使用HTML5 datalist元素？

在您的网页中包含Awesomplete

基本功能

使用data-list属性

使用JavaScript

扩展的JavaScript属性

绑在一起

深入探讨-事件，API和Ajax

结局

结论

相关阅读

相关文章

相关问答

相关文档

为什么不使用HTML5 `datalist`元素？

使用`data-list`属性