Ember-Typeahead-Grammofy 的使用教程

简介

Ember-Typeahead-Grammofy 是一个为 EmberJS 开发的轻量级自动补全插件，可以快速地将自动补全功能添加到你的 EmberJS 应用程序中。此插件使用 Grammofy API 作为其数据源，并支持一些高级过滤功能，以帮助你快速找到所需的结果。

快速开始

安装

使用 npm 包管理器，可以轻松地将 Ember-Typeahead-Grammofy 添加到你的 EmberJS 应用程序中。运行以下命令：

npm install --save ember-typeahead-grammofy

基本使用

1. 在你的 EmberJS 应用程序的 template 中添加一个文本输入框，并以 typeahead-grammofy 为其组件名。

{{typeahead-grammofy inputValue=(action "updateSearchTerm")}}

1. 在你的 EmberJS 应用程序中，创建具有名称 typeahead-grammofy 的组件。

import Component from '@ember/component';
import TypeaheadGrammofy from 'ember-typeahead-grammofy';

export default Component.extend(TypeaheadGrammofy, {
  // ... other component code here
});

1. 启动你的 EmberJS 应用程序，并在文本输入框中键入一些文字。

你应该会看到自动补全功能已经激活了，并根据你的文字提示提供了一些可选的结果。

配置选项

Ember-Typeahead-Grammofy 提供了许多配置选项。以下是一些常见的选项：

• minLength：设置当用户键入的最小字符数时，自动补全建议将显示出来。默认是 3。
• searchDelay：设置在用户键入文本后，在显示自动补全建议之前要等待的时间量。默认是 300 毫秒。
• highlightResults：设置是否应突出显示建议结果中的搜索词。默认是 true。
• filterResults：设置自定义过滤函数，以控制建议结果的显示方式。默认是一个空函数。

以下是使用配置选项的示例：

{{typeahead-grammofy
  inputValue=(action "updateSearchTerm")
  minLength=2
  searchDelay=200
  highlightResults=false
  filterResults=(action "customFilter")}}

自定义过滤器

通过设置 filterResults 选项，你可以提供一个名为 customFilter 的函数，以控制建议结果的显示方式。该函数将接收一个针对建议的筛选器，并应输出一个筛选后的建议列表。

以下是一个使用自定义过滤器的示例：

-- -------------------- ---- -------
------ --------- ---- -------------------
------ ----------------- ---- ---------------------------

------ ------- ----------------------------------- -
  ------------------------- ------ -
    ----- ------------------- - ------------------------------- -- -
      ------ ----------------------------------------------------------- --- ---
    ---

    ------ --------------------
  -
---

该示例中的 customFilter 函数使用查询字符串 query 来筛选建议结果。它将建议的 label 属性转换为小写字母，以便与查询字符串进行比较。然后，它使用 filter() 函数从建议中仅选择那些包含查询字符串的选项。最后，它输出这些选项的列表。

结论

通过使用 Ember-Typeahead-Grammofy 插件，你可以轻松地为你的 EmberJS 应用程序添加自动补全功能。你可以使用它提供的许多配置选项来自定义插件的行为，并使用自定义过滤器函数来控制建议结果的显示方式。使用此插件，你可以为你的用户提供更好的搜索和导航体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1aa563576b7b1ecbf3