npm 包 angular-simple-autocomplete 使用教程
什么是 angular-simple-autocomplete?
angular-simple-autocomplete 是一个 Angular 应用程序框架的的 npm 包,可以实现自动补全的功能。它可以接收一些指定的输入,联想出匹配的选项,使得用户可以快速选择正确的选项。
其中包括自定义指令、服务、控制器和样式表等组件,它们可以方便地与用户的 Angular 应用程序集成到一起。
安装 angular-simple-autocomplete
使用 npm 包管理器安装 angular-simple-autocomplete。
npm install angular-simple-autocomplete --save
安装完成后,我们需要在应用程序的 app.module.ts
文件中引入 SimpleAutocompleteModule
:
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - ------------ - ---- ------------------ ------ - ------------------------ - ---- ------------------------------ ----------- -------- - -------------- ------------ ------------------------ -- ------------- - ------------ -- ---------- - ------------ - -- ------ ----- --------- - -展开代码
使用 angular-simple-autocomplete
要使用 angular-simple-autocomplete,你需要在你自己的组件中记录下你所需要的选项列表。然后使用我们的组件在用户界面上显示出来。
在组件中记录下选项列表
在组件的类中,定义一个数组(e.g., suggestions
),该数组包含了所有选项。这个数组现在的值可以来自于任何途径,包括 API 响应或静态数据文件(例如,JSON 或者 CSV 格式)。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ - ----------- - --------- ----------- ------- ------ ---------- -------- ----- ------ ------- ----- -------- ------------- ------- ----- --------- ------- ------ ------- ------ ------------------ ------ ------- ------ -------- ------ ----- -------- -------- - --------- ------ ------- ------------ ------ - ----- -------- ------------ ----------- ------- --------- ---------- -------- - -------- -------- - -------- ------- -------- --------- ------ -------- ------- --------- ---------- ----- -------- ------- -- ------------------ - --- -展开代码
使用组件显示选项列表
在 `app.component.html' 的模板中,您可以导入并使用 SimpleAutocomplete 组件。
<simple-autocomplete [data]="suggestions" [(ngModel)]="selectedSuggestion" delay="100" placeholder="Search company..."> </simple-autocomplete>
Angular-simple-autocomplete 的选项
[data]
—— 选项列表,也就是你记录下的suggestions
数组。[(ngModel)]
—— 提供了关于选项的信息,并且将用户的输入重新赋值回selectSuggestion
。delay
—— 可选(默认值为 100 毫秒),表示输入延迟的时间,以确保从远程数据源获取数据的时候不会在每次键入后都发起请求。placeholder
—— 占位符,可选。
注册服务
在你的组件中,你必须要手动地向你的服务中注册控制器。
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ---------------------------- - ---- ------------------------------ ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ ---------- ------ - ------------------- ------- ----------------------------- - - ---------- - --------------------------- - ----------- - ------ ------------------ - --- --------------------------- - --------------------- ------------- ------- - -展开代码
开发完成
完成这部分,并附上你的代码后,你的 Angular 应用程序现在可以使用 angular-simple-autocomplete 组件来实现自动补全的功能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005599381e8991b448d7299