ng2-bootstrap-typeahead-mod 是一个基于 Angular2 构建的自动完成控件。它使用 Bootstrap4 中的 Typeahead 组件并增强了很多功能，可以帮助我们更加方便地实现输入提示查询、数据绑定、异步数据加载等功能，而不用耗费过多的时间和精力去开发自己的自动完成控件。
安装
我们可以通过 npm 来安装 ng2-bootstrap-typeahead-mod，使用如下命令：
npm install ng2-bootstrap-typeahead-mod --save
同时，我们还需要安装相关的依赖：
npm install bootstrap font-awesome --save
引用
在项目中引入 ng2-bootstrap-typeahead-mod 时，我们需要引用以下几个文件（需要在 index.html 文件中添加）：
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
示例代码
下面是一个使用 ng2-bootstrap-typeahead-mod 的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ------------------
------ ------------------------
------ ---------------------------------
------ -----------------------------------------
------ ------------------------------
------ - -------------- - ---- ------------------------------
------------
--------- ----------------
--------- -
------ ----------------------
------------------------
--------------------------------------
---------------------------
------------------ - ----- ------
-
--
------ ----- ------------------ -
----------- --------------- -- -----
--------- ------- -- -----
------------- -
--------------- - ---------------------------- ---- -- -
-- -----
----- ------ - ----------- --------- ---------- ----------- ------------- ----------- -------------- ----------- ---------- ---------- --------- -------- -----------
---------- ------- --------- ----------- ------------ -------- ----------- ---------------- ----------- ------------ -------------- ----------- ----------
----------- --------- ---- ----------- ---- -------- ---- -------- ---- ------ ------ ---------- ------ -------- ------- ----------- --------- ---------------
------ -------- ------ ---------- ------ -------- ------------ -------- ------- ---------- ----------- ------------- ----- ---------- ------------ -----------
-- -- ---- --
----------------------
------------------- ------- -- -
-- ----
------ -------------------------------------- -- --------------------
---
-
------------- ------- -
-- ----
------ --------
-
----------- --------------- -
-- ----
------------- - --------
---------------------------
-
-数据源
ng2-bootstrap-typeahead-mod 的数据源可以是任何类型的数据，如字符串数组、对象数组等。我们在定义数据源时，需要使用 Observable。Observable 是一种提供基于异步流 API 的数据类型，它会将异步流看作数据源，通过订阅和观察这个数据流，我们可以在其上面进行各种操作，比如过滤、转换、合并等。
过滤数据
ng2-bootstrap-typeahead-mod 提供了过滤数据的功能，我们可以自定义过滤规则来实现输入内容的模糊匹配。我们可以通过实现 Observable 中的 map 运算符来实现这个功能。下面是一个示例代码：
-- -------------------- ---- -------
--------------- - ---------------------------- ---- -- -
-- -----
----- ------ - ----------- --------- ---------- ----------- ------------- ----------- -------------- ----------- ---------- ---------- --------- -------- -----------
---------- ------- --------- ----------- ------------ -------- ----------- ---------------- ----------- ------------ -------------- ----------- ----------
----------- --------- ---- ----------- ---- -------- ---- -------- ---- ------ ------ ---------- ------ -------- ------- ----------- --------- ---------------
------ -------- ------ ---------- ------ -------- ------------ -------- ------- ---------- ----------- ------------- ----- ---------- ------------ -----------
-- -- ---- --
----------------------
------------------- ------- -- -
-- ----
------ -------------------------------------- -- --------------------
---
------------- ------- -
-- ----
------ --------
-选中事件
当用户选中某个选项时，我们可以通过 typeaheadOnSelect 事件来获取该选项的值，并赋值给 selected 变量，示例如下：
<input [(ngModel)]="selected"
[typeahead]="dataSource"
(typeaheadOnSelect)="onSelect($event)"
[typeaheadOptionsLimit]="7"
placeholder="Enter a state name">onSelect(e: TypeaheadMatch) {
// 选中事件
this.selected = e.value;
console.log(this.selected);
}总结
通过本篇文章的学习，我们可以掌握 npm 包 ng2-bootstrap-typeahead-mod 的使用方法，并能够实现输入提示查询、数据绑定、异步数据加载等功能，可以帮助我们更加方便地开发自己的自动完成控件。希望本篇文章对于初学者们有一定的指导作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8681e8991b448d920d