简介
ng2-auto-complete 是一个 Angular2 的自动补全输入框组件，它基于 Rxjs 和 Zone.js 的特性实现了自动补全功能。使用 ng2-auto-complete 包可以节省很多代码，同时也能够减少一些错误，让我们更加专注于业务逻辑。
安装
使用 npm 进行安装：
npm install ng2-auto-complete@0.5.1 --save
使用
- 首先在组件中引入 AutoCompleteModule 以及 FormsModule：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - ------------------ - ---- -------------------- ------ - ------------ - ---- ------------------ ----------- -------- - -------------- ------------ ------------------ -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -
- 在组件的 HTML 中使用 ng2-auto-complete：
<ng2-auto-complete [listFormatter]="formatter" [source]="countries" [pathToData]="data" placeholder="Country" [(ngModel)]="selectedCountry"></ng2-auto-complete>
具体参数的含义如下：
listFormatter： 用来格式化数据列表的函数，必须是一个函数。source： 自动补全的数据源，可以是一个数组或者是一个函数。data： 对于每一个项目的数据路径，可以是一个属性名，也可以是一个函数。placeholder： 输入框的提示文本。
下面是一个示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---- - ---- ----------------
------------
--------- ---------
--------- -
--------------------- ------------
------------------ --------------------------- ----------------------- --------------------- --------------------- --------------------------------------------------
-
--
------ ----- ------------ -
---------------- ----
---------- ----- - -
- ----- ------------- --
- ----- ----------- --
- ----- --------- --
- ----- ------------ --
- ----- -------- --
- ----- -------- --
- ----- ------- --
- ----- ------ --
- ----- ------- -
--
------------------- ----- ----- - -
-------------------- ------ -
------ ---------------------- --------- -
------ -------------
---
-
--------------------- ------- -
--- --- - ---------------------------------------- - --------
------ ------------------
--------------- -- -
------ ---------------
-------------- -- -
------ - ----- ------------ --
---
---
-
-在这个例子中，我们用 getCountries 返回了一个 Observable，当用户在输入框中输入字符串时，这个函数会在服务端搜索匹配的国家。同时，我们也实现了一个 listFormatter 函数，用来格式化搜索结果。
总结
通过本文，我们学习了如何使用 ng2-auto-complete 包实现自动补全输入框的功能。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551f081e8991b448cf6f7