ionic2-auto-complete-with-ng5 是一个基于 Angular5 和 Ionic2 开发的自动补全组件库。它可以轻松地添加自动补全功能到你的 web 应用中，让用户更加方便快捷地输入数据。本文将详细介绍如何使用 ionic2-auto-complete-with-ng5，包括安装使用、配置以及示例代码。
安装
要使用 ionic2-auto-complete-with-ng5，你需要先安装 npm 包管理器，然后通过 npm 安装 ionic2-auto-complete-with-ng5。以下是具体的安装步骤：
安装 npm
如果你还没有安装 npm，可以通过以下链接下载并安装：https://www.npmjs.com/
安装 ionic2-auto-complete-with-ng5
在终端或命令行中执行以下命令来安装 ionic2-auto-complete-with-ng5：
npm install ionic2-auto-complete-with-ng5 --save
使用方法
导入并配置
在你的组件中导入 AutoCompleteModule，并添加到 @NgModule 的 imports 中。如下所示：
-- -------------------- ---- -------
------ - ------------------ - ---- --------------------------------
-----------
------------- -
-- ---
--
-------- -
-- ---
-------------------
--
--基本用法
在你的模板中使用 ionic2-auto-complete-with-ng5 的 auto-complete 标签。例如，添加到一个输入框中实现自动补全功能：
<ion-item>
<ion-label>选择城市</ion-label>
<ion-input type="text" [(ngModel)]="selectedCity" autocapitalize="off"
autoCorrect="off" spellcheck="off">
<auto-complete [dataProvider]="cityDataProvider" [searchProperty]="'name'"
(itemSelected)="onCitySelected($event)"></auto-complete>
</ion-input>
</ion-item>可以看到，我们将数据提供器 dataProvider、搜索属性 searchProperty 和选项选中的事件 (itemSelected)，都绑定在了 auto-complete 上。这些都是 ionic2-auto-complete-with-ng5 的核心属性和事件，下面将一一讲解。
配置项
dataProvider
数据提供器，用于提供自动补全选项的数据。需要注意的是，dataProvider 必须实现 ITokenSearchDataProvider 接口，具体如下：
export interface ITokenSearchDataProvider {
getResults(keyword: string): Observable<ITokenResult[]>;
}其中 ITokenResult 是具体数据模型，需要包含 name 等关键属性。
以下是一个简单的例子：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- ------------------
------ - ------------------------- ------------ - ---- --------------------------------
-------------
------ ----- ---------------- ---------- ------------------------ -
------- ------ - -
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- --- ----- ---- --
--
------------------- -------- -------------------------- -
----- -------- -------------- - ---
-- --------- -
------------------------ -- -
-- ----------------------------- -
-------------------
-
---
-
------ -----------------------
-
-searchProperty
搜索属性，用于指定自动补全选项的关键属性。对于上面的例子，就是 name。
maxVisibleItems
最大可见选项数。当选项个数超过 maxVisibleItems 时，会滚动显示。
inputElement
用于自动补全选项的输入框元素。
itemSelected
选中选项后的回调函数。回调函数中的参数 event 包含了所选中的选项。
showResultsFirst
显示结果标志。它的默认值为 false。当设置为 true 时，将不显示结果列表。它适用于一些特殊场景，例如仅用于搜索。
示例代码
以下是一个完整的示例，包括导入并配置、数据提供器、模板和组件：
导入并配置：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ----------------
------ - ------------------ - ---- --------------------------------
------ - ---------------- - ---- --------------------------------------
------------
--------- ------------
------------ ------------
--
------ ----- -------- -
------------ - ---
------------------ -------- --------------
------- ----------------- ----------------- -
-
-
-----------
------------- -
-- ---
--
-------- -
-- ---
-------------------
--
---------- -
-----------------
--
--
数据提供器：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- ------------------
------ - ------------------------- ------------ - ---- --------------------------------
-------------
------ ----- ---------------- ---------- ------------------------ -
------- ------ - -
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- --- ----- ---- --
--
------------------- -------- -------------------------- -
----- -------- -------------- - ---
-- --------- -
------------------------ -- -
-- ----------------------------- -
-------------------
-
---
-
------ -----------------------
-
-模板：
-- -------------------- ---- -------
------------
------------
-----------
------
------------
-------------
-------------
------------ --------
----------
---------------------------
---------- ----------- -------------------------- --------------------
----------------- -----------------
-------------- --------------------------------- -------------------------
--------------------------------------------------------
------------
-----------
--------------组件实现：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ----------------
------ - ------------------ - ---- --------------------------------
------ - ---------------- - ---- --------------------------------------
------------
--------- ------------
------------ ------------
--
------ ----- -------- -
------------ - ---
------------------ -------- --------------
------- ----------------- ----------------- - -
--------------------- ------------- -
--------------------- ---- -------- -------
-
-运行以上代码，就可以看到自动补全组件的效果：
总结
ionic2-auto-complete-with-ng5 是一个功能强大且易于使用的自动补全组件库。它提供了许多自定义配置项，可以快速轻松地实现自动补全功能。本文仅介绍了 ionic2-auto-complete-with-ng5 的一些基本使用方法和示例代码，但该组件库还有更多高级用法和进阶技巧。如果你感兴趣，可以查看官方文档：https://www.npmjs.com/package/ionic2-auto-complete-with-ng5。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005696a81e8991b448e4d37
