在前端开发中，自动完成输入框是一个非常常见的组件。而使用 @brycemarshall/autocomplete-angular 这个 npm 包，我们能够轻松地在 Angular 项目中加入一个自动完成输入框。本文将为大家介绍该包的使用教程。
安装
首先，我们需要在自己的 Angular 项目中安装该 npm 包，如下：
npm install --save @brycemarshall/autocomplete-angular
使用方法
引入
在我们需要使用自动完成组件的 Angular 组件文件中引入该组件：
import { AutocompleteComponent } from '@brycemarshall/autocomplete-angular';
数据绑定
接下来，我们需要在组件的数据导入中定义自动完成输入框用到的数据，如下：
autocompleteData = [ 'Angular', 'React', 'Vue', 'Node.js', 'JavaScript' ];
该数据为一个字符串数组，包含了所有可供选取的数据。当用户在输入框中输入文字时，展示在下方供选择的数据就是该数组中的选项。
模板
在我们的组件模板中，定义以下代码：
<autocomplete #autocompleteComponent [data]="autocompleteData" [searchKeyword]="searchKeyword" (onSelect)="onSelect($event)"> </autocomplete>
其中：
data为我们之前定义的字符串数组，作为下方可选数据的来源；searchKeyword为输入框中正在输入的关键词，将作为用户输入的数据进行搜索；(onSelect)是一个事件绑定，当用户在下方的选项中选择其中一项时，会触发该回调函数，我们可以在该函数中对选择的数据进行处理。
注意，上方代码中的 #autocompleteComponent 是我们在实现自动完成组件时需要访问的子组件的引用名，我们可以在组件中通过该引用名找到子组件，以实现更加灵活和精准的控制。你也可以随意定义该名字，只需要确保它不与其他变量重复即可。
TypeScript 控制逻辑
在我们的 TypeScript 文件中，维护以下逻辑：
-- -------------------- ---- ------- ------ ----- ---------------------------- - -------------- ------ - --- ---------------- - - ---------- -------- ------ ---------- ------------ -- ----------------------------------- ---------------------- ---------------------- ---------------------- - -------------------------- ---------------------------------------- - -展开代码
上面的代码思路可以简单解释为：
- 在组件作用域内维护搜索关键词
searchKeyword以及所有可供搜索的数据autocompleteData; - 在上方模板中，为
Autocomplete组件绑定了一个(onSelect)事件回调函数onSelect； - 在
onSelect回调函数中，我们可以通过selectedData参数获得用户选择的数据，然后进行数据处理或其他操作； - 最后，我们通过
@ViewChild装饰器，访问到了Autocomplete组件，并清空了输入框中的文本。
通过上述代码，我们就能够成功地在 Angular 项目中使用了 @brycemarshall/autocomplete-angular 这个 npm 包，并轻松地实现了自动完成输入框。
小结
本文为大家介绍了如何在 Angular 项目中使用 @brycemarshall/autocomplete-angular 这个 npm 包，通过一步步的示例代码详细地讲解了如何引入、数据绑定、模板以及 TypeScript 控制逻辑，希望对大家有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606c81e8991b448de904
