Npm 是前端开发过程中非常重要的包管理工具，它可以让我们方便地引用别人写的代码，减少了开发的工作量。在这篇文章中，我将介绍一个常用的 npm 包 ag2-completer，并给出一些使用示例。
什么是 ag2-completer
ag2-completer 是一个 Angular2 的自动完成组件，它能够给输入框提供智能提示的功能。它的样式和行为特性可以通过配置进行自定义。相关的源代码可以在 GitHub 上获取到。
安装 ag2-completer
如果你已经安装了 npm，则可以通过以下命令来安装 ag2-completer：
npm install ag2-completer --save
这样就可以将 ag2-completer 安装到你的项目中了。
使用 ag2-completer
下面是一个简单的使用示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- ------------- - ---- ----------------
------------
--------- ---------
--------- -
--------------
-----------------------
---------------------------
---------------------
-------------
---------------------- ----- ---------
-----------------------------
-----------------
--
--
------ ----- ------------ -
------- ---------- -------
------- ------------ --------------
------------------- ----------------- ----------------- -
---------------- - -------------------------------------------------------------------------------------------------------------- -------- --------
-
-这个例子使用了 GitHub API 来获取一些仓库信息，并把它们显示在自动完成组件中。
可以配置的参数
可以通过下面的参数来配置 ag2-completer 组件的样式和行为：
dataService
一个实现了 CompleterData 接口的对象，可以通过它来获取自动完成的数据。
minSearchLength
搜索框中输入字符的最小长度。当输入框中字符长度小于此值的时候，将不会显示自动完成列表。
pause
触发自动完成提示请求的时间间隔（以毫秒为单位）。
placeholder
输入框的占位符文本。
inputClass
输入框的样式类名。
autocompleteOff
默认为 true，设置为 false 来启用浏览器的自动完成特性。
autoMatch
默认为 true，在匹配选项时是否忽略大小写。
initialValue
自动完成组件在打开时的初始值。
debounceTime
触发键盘事件后延迟处理时间（以毫秒为单位）。
fillHighlighted
默认为 true，设置为 false 后不会在选项中填充高亮文本。
maxChars
输入框中输入字符的最大长度。
clearSelected
默认为 true，控制是否在选择后清空搜索框。
clearUnselected
默认为 false，控制是否在取消选择后清空搜索框。
结语
ag2-completer 是一款功能强大、易于使用的 angular2 自动完成组件。如果你正在寻找一个能够快速提升你项目交互体验的工具，那么应该考虑一下使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd581e8991b448e66f9