简介
Ember-Typeahead-Grammofy 是一个为 EmberJS 开发的轻量级自动补全插件，可以快速地将自动补全功能添加到你的 EmberJS 应用程序中。此插件使用 Grammofy API 作为其数据源，并支持一些高级过滤功能，以帮助你快速找到所需的结果。
快速开始
安装
使用 npm 包管理器，可以轻松地将 Ember-Typeahead-Grammofy 添加到你的 EmberJS 应用程序中。运行以下命令：
--- ------- ------ ------------------------
基本使用
- 在你的 EmberJS 应用程序的 template 中添加一个文本输入框，并以
typeahead-grammofy为其组件名。
-------------------- ------------------ ---------------------
- 在你的 EmberJS 应用程序中，创建具有名称
typeahead-grammofy的组件。
------ --------- ---- ------------------- ------ ----------------- ---- --------------------------- ------ ------- ----------------------------------- - -- --- ----- --------- ---- ---- ---
- 启动你的 EmberJS 应用程序，并在文本输入框中键入一些文字。
你应该会看到自动补全功能已经激活了，并根据你的文字提示提供了一些可选的结果。
配置选项
Ember-Typeahead-Grammofy 提供了许多配置选项。以下是一些常见的选项：
minLength：设置当用户键入的最小字符数时，自动补全建议将显示出来。默认是 3。searchDelay：设置在用户键入文本后，在显示自动补全建议之前要等待的时间量。默认是 300 毫秒。highlightResults：设置是否应突出显示建议结果中的搜索词。默认是 true。filterResults：设置自定义过滤函数，以控制建议结果的显示方式。默认是一个空函数。
以下是使用配置选项的示例：
-------------------- ------------------ ------------------- ----------- --------------- ---------------------- --------------------- -----------------
自定义过滤器
通过设置 filterResults 选项，你可以提供一个名为 customFilter 的函数，以控制建议结果的显示方式。该函数将接收一个针对建议的筛选器，并应输出一个筛选后的建议列表。
以下是一个使用自定义过滤器的示例：
------ --------- ---- -------------------
------ ----------------- ---- ---------------------------
------ ------- ----------------------------------- -
------------------------- ------ -
----- ------------------- - ------------------------------- -- -
------ ----------------------------------------------------------- --- ---
---
------ --------------------
-
---该示例中的 customFilter 函数使用查询字符串 query 来筛选建议结果。它将建议的 label 属性转换为小写字母，以便与查询字符串进行比较。然后，它使用 filter() 函数从建议中仅选择那些包含查询字符串的选项。最后，它输出这些选项的列表。
结论
通过使用 Ember-Typeahead-Grammofy 插件，你可以轻松地为你的 EmberJS 应用程序添加自动补全功能。你可以使用它提供的许多配置选项来自定义插件的行为，并使用自定义过滤器函数来控制建议结果的显示方式。使用此插件，你可以为你的用户提供更好的搜索和导航体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e1aa563576b7b1ecbf3