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