npm 包 angular-simple-autocomplete 使用教程

阅读时长 6 分钟读完

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

纠错
反馈

纠错反馈