# @akveo/ng2-completer 中文文档

规范地址：https://npmcn.com/package/%40akveo/ng2-completer/

版本：9\.0\.1
npm 元数据更新时间：2026-02-20T14:04:12.921Z
中文译文更新时间：2026-11-05T22:12:09.293Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40akveo/ng2-completer
原文对照：https://npmcn.com/package/%40akveo/ng2-completer/?lang=original
项目主页：https://github.com/oferh/ng2-completer/issues/447
源码仓库：https://github.com/oferh/ng2-completer

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：902 kB，32 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@angular/core \>= 6\.0\.0，@angular/forms \>= 6\.0\.0，@angular/common \>= 6\.0\.0
- 首次发布：2020-03-23T09:55:27.155Z
- 最新版本发布：2020-03-23T09:55:27.702Z
- 近 30 天下载量：13772（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

临时叉子 [https://github.com/oferh/ng2-completeer 互联网档案馆的存檔,存档日期2013-12-2](https://github.com/oferh/ng2-completer) 解决建筑问题

## 安装

```sh
npm install @akveo/ng2-completer
```

也可以使用：`pnpm add @akveo/ng2-completer`、`yarn add @akveo/ng2-completer`、`bun add @akveo/ng2-completer`

## README

# 纳克-2 完成器

Angular 2 的自动完整组件.

本构成部分的依据是: [自动填充](https://github.com/ghiden/angucomplete-alt)

点击 [演示](http://oferh.github.io/ng2-completer/) 或者说 [倾斜](https://plnkr.co/edit/sVnfpBiEb5jBdtul4ls9?p=preview)

## 需要帮助

我不再经常使用这个图书馆,也没有时间适当维护它. 如果你正在使用 ng2 完成器 并有兴趣维持它 请告诉我!

## 安装

```sh
npm install ng2-completer --save
```

## 使用量

您想要使用 ng2 完成器的模块必须导入 `Ng2CompleterModule` 财务报告和审定财务报表 `FormsModule` (使用ngModel系统) 有关ng2完成器的指令. `Ng2CompleterModule` 提供 `CompleterService`,并宣布 `ng2-completer` 指令.

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { Ng2CompleterModule } from "ng2-completer";


@NgModule({
  imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      Ng2CompleterModule,
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

在组件中添加 ng2 完成器并创建数据源 :

```ts
import { Component } from '@angular/core';
import { CompleterService, CompleterData } from 'ng2-completer';

@Component({
  selector: 'my-component',
  template: `<h1>Search color</h1>
            <ng2-completer [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0"></ng2-completer>
            <h1>Search captain</h1>
            <ng2-completer [(ngModel)]="captain" [datasource]="captains" [minSearchLength]="0"></ng2-completer>`
})
export class MyComponent {

  protected searchStr: string;
  protected captain: string;
  protected dataService: CompleterData;
  protected searchData = [
    { color: 'red', value: '#f00' },
    { color: 'green', value: '#0f0' },
    { color: 'blue', value: '#00f' },
    { color: 'cyan', value: '#0ff' },
    { color: 'magenta', value: '#f0f' },
    { color: 'yellow', value: '#ff0' },
    { color: 'black', value: '#000' }
  ];
  protected captains = ['James T. Kirk', 'Benjamin Sisko', 'Jean-Luc Picard', 'Spock', 'Jonathan Archer', 'Hikaru Sulu', 'Christopher Pike', 'Rachel Garrett' ];

  constructor(private completerService: CompleterService) {
    this.dataService = completerService.local(this.searchData, 'color', 'color');
  }
}
```

g2 完成用途 [rxjs (韩语)](https://github.com/Reactive-Extensions/RxJS) 作为数据源的流. 有2个已准备好的数据源可用于获取本地和远程数据,但也有可能提供 生成项目流的自定义源.

### System.js 配置

添加以下内容到 `System.js` 地图配置 :

```ts
   var map = {
       ...
       'ng2-completer': 'node_modules/ng2-completer/ng2-completer.umd.js'
   }
```

## API 密码

### g2 完成组件

| 属性 | 说明 | 类型 | 需求 | 默认 |
| :-- | :-- | :-- | :-- | :-- |
| 数据源 | 自动完整列表数据源可以是字符串数组,也可以是导致字符串数组或完整数据对象的URL | 矩阵 < 字符串 > 字符串 > 完成器Data | 对 |  |
| 数据服务 | **折旧** 使用情况 `datasource` 换句话说 自动完整列表数据源 . | 完整数据 | 对 |  |
| 纳克-摩尔 | 见角 [窗体 API](https://angular.io/docs/js/latest/guide/forms.html)。 。 。 . | 字符串 | 对 |  |
| 自动匹配 | 自动选择一个项目, 如果它是唯一的结果, 并且它是搜索文本的精确匹配 . | 布尔 | 没有 | 虚假 |
| 自动聚焦 | 页面加载时设置输入焦点 | 布尔 | 没有 | 虚假 |
| 清除未选 | 清除未选中的模糊输入 . | 布尔 | 没有 | 虚假 |
| 清除选中 | 选择结果时清除输入 . | 布尔 | 没有 | 虚假 |
| 禁用输入 | 如果真禁用输入字段 . | 布尔 | 没有 | 虚假 |
| 字段标签 | 设定 `tabIndex` 输入. | 编号 | 没有 |  |
| 初次 数值 | 组件的初始值。 数值使用标题字段、描述字段和图像字段进行解析,并作为所选值使用 | 任意 | 没有 |  |
| 输入 | `id` 输入元素的属性. | 字符串 | 没有 |  |
| 输入Name | `name` 输入元素的属性. | 字符串 | 没有 |  |
| 输入分类 | `class` 输入元素的属性. | 字符串 | 没有 |  |
| 匹配分类 | CSS类申请匹配部分标题和描述. | 字符串 | 没有 |  |
| 最大 | 用户可以在组件中输入的最大字符数. | 编号 | 没有 | 524288 (英语) |
| 分钟搜索Length | 搜索所需的最小字符数 . | 编号 | 没有 | 3个 |
| 建议的覆盖 | 如果真将覆盖建议并设定输入字段中的值 . | 布尔 | 没有 | 虚假 |
| 打开焦点 | 如果真能打开下拉并当输入获得焦点时进行搜索. | 布尔 | 没有 | 虚假 |
| 打开点击 | 若真会打开并点击关闭下拉. | 布尔 | 没有 | 虚假 |
| 选择焦点 | 如果真将选择焦点上的输入文本 . | 布尔 | 没有 | 虚假 |
| 选择点击 | 如果选中的话, 请单击 . | 布尔 | 没有 | 虚假 |
| 突出显示 | 如果在项目被突出显示时, true 将设置输入字段值的模型 . | 布尔 | 没有 | 真实 |
| 暂停 | 搜索前要等待的 msec 数量 . | 编号 | 没有 | 250号 |
| 占位符 | 搜索字段的占位符文本 . | 字符串 | 没有 |  |
| 文本 无结果 | 搜索未返回结果时显示的文本 。 如果弦是发作,它不会被显示 | 字符串 | 没有 |  |
| 文本显示 | 搜索活动时显示文本 。 如果弦是发作,它不会被显示 | 字符串 | 没有 | 正在搜索中... |
| 自动突出显示 | 当输入更改时自动突出显示最佳匹配搜索结果 。 选择“ 最佳匹配” 的是: 精确匹配, 开始并最后包含 | 布尔 | 没有 | 虚假 |

### g2 完成活动

| 名称 | 说明 | 类型 |
| :-- | :-- | :-- |
| 选中 | 选定项目时释放 . | (所选:完成器项目):无效 |
| 突出显示 | 当某一项被突出显示时释放. | (重点:完成器项目):无效 |
| 焦点 | 输入焦点时释放 | (:无效) |
| 模糊 | 当输入焦点松散时释放 | (:无效) |
| 打开 | 滴滴打开或关闭时释放 | (打开:布尔:无效) |
| 密钥 | 输入出密钥时释放 | (事件:任何):无效 |
| 键入 | 输入出密钥时释放 | (事件:任何):无效 |

### g2 完成方法

| 方法 | 说明 | 参数 |
| :-- | :-- | :-- |
| 打开( c) | 打开下拉 |  |
| 关闭( c) | 关闭下拉 |  |
| 重点( ) | 将焦点设定为更完整的输入 |  |
| 模糊( c) | 从完整的输入中删除焦点 |  |
| 打开( I) | 返回下拉状态 |  |

### 本地数据

通过调用创建本地数据提供者 `CompleterService.local`。 。 。 .

#### 参数

| 名称 | 类型 | 说明 | 需求 |
| :-- | :-- | :-- | :-- |
| 数据 | 任何可观察的<任何> | 带有要使用的数据的 JSON 阵列, 或可观测的发射一个阵列 | 对 |
| 搜索字段 | 字符串 | 逗号分隔的要搜索的字段列表 。 字段可能包含嵌入属性的点;如果空或无效,所有数据都会被返回. | 对 |
| 标题字段 | 字符串 | 用于列表项的标题的字段名称 . | 对 |

#### 属性

| 名称 | 类型 | 说明 |
| :-- | :-- | :-- |
| 字段 | 字符串 | 用于列表项描述的字段名称 . |
| 图像字段 | 字符串 | 用于列表项的图像 URL 字段名称 . |

### 远程数据

通过调用创建远程数据提供者 `CompleterService.remote`。 。 。 .

#### 参数

| 名称 | 类型 | 说明 | 需求 |
| :-- | :-- | :-- | :-- |
| url 密码 | 字符串 | 搜索的基础 URL | 对 |
| 搜索字段 | 字符串 | 逗号分隔的要搜索的字段列表 。 字段可能包含嵌入属性的点;如果空或无效,所有数据都会被返回. | 对 |
| 标题字段 | 字符串 | 用于列表项的标题的字段名称 . | 对 |

#### 属性

| 名称 | 类型 | 说明 |
| :-- | :-- | :-- |
| 字段 | 字符串 | 用于列表项描述的字段名称 . |
| 图像字段 | 字符串 | 用于列表项的图像 URL 字段名称 . |
| url 格式化软件 | (期限:字符串) qq 字符串 | 函数在每次搜索前获得搜索名并返回搜索url . |
| 数据字段 | 字符串 | 包括数据的响应中的字段. |
| 选项 | 请求选项 (@angular/common/http) | HTTP 请求与搜索请求一起发送的选项 . |

### CSS课程

-   `.completer-holder`
-   `.completer-input`
-   `.completer-dropdown-holder`
-   `.completer-dropdown`
-   `.completer-searching`
-   `.completer-no-results`
-   `.completer-row`
-   `.completer-image-holder`
-   `.completer-image`
-   `.completer-image-default`
-   `.completer-title`
-   `.completer-description`
-   `.completer-list-item-holder`
-   `.completer-list-item`
-   `.completer-selected-row`

## 贷项

-   本产品使用TMDb API,但未经TMDb认可或认证

## 常见问题

### @akveo/ng2-completer 是什么？

临时叉子 https://github\.com/oferh/ng2-completeer 互联网档案馆的存檔,存档日期2013-12-2 解决建筑问题

### 如何安装 @akveo/ng2-completer？

在项目目录运行 npm install @akveo/ng2-completer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（\>= 6\.0\.0）、@angular/forms（\>= 6\.0\.0）、@angular/common（\>= 6\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @akveo/ng2-completer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @akveo/ng2-completer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @akveo/ng2-completer 可以商用吗？

@akveo/ng2-completer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @akveo/ng2-completer 的下载量有多少？

根据 npm 官方下载统计，@akveo/ng2-completer 在 2026/10/06 – 2026/11/04 这 30 天内被下载 13,772 次，日均约 459 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @akveo/ng2-completer 还在维护吗？

最新版本 9\.0\.1 发布于 2020/03/23（6 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/03/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。