自动扣javascript
自动完成功能是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" />
请参阅CodePen上SitePoint ( @SitePoint )的Pen Awesomplete(1) 。
使用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 。
![](https://i-blog.csdnimg.cn/blog_migrate/e947c9a31a53567f33023d82536bfbd0.png)
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
使用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>$&</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
功能组合在一起,以便仅在用户输入指定字符(在这种情况下为逗号后跟空格)的情况下提出建议:
请参阅CodePen上SitePoint ( @SitePoint )的Pen Awesomplete(3) 。
深入探讨-事件,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 ,该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库在项目中实现自动完成小部件的难易程度。 该项目仍在积极维护中,我建议您检查一下。
翻译自: https://www.sitepoint.com/javascript-autocomplete-widget-awesomplete/
自动扣javascript