Ember-Typeahead 是一个 Ember.js 的插件，用于实现输入自动补全的功能。它支持各种数据源，包括 AJAX、本地 JSON 文件等，并且具有灵活的选项配置。
本篇文章将详细介绍如何使用 Ember-Typeahead，并提供代码示例和指导意义，帮助你快速掌握该插件的使用方法。
安装
使用 npm 安装 Ember-Typeahead：
npm install ember-typeahead
使用方法
在 Ember 应用程序中，使用 Ember-CLI 快速创建组件并注册一个名为 type-ahead 的组件。首先需要创建样式和模板文件：
<!-- app/templates/components/type-ahead.hbs -->
{{input type="text" value=searchTerm placeholder="Search"}}
{{#type-ahead data=suggestions on-select=(action "selectItem") as |item|}}
{{item.label}}
{{/type-ahead}}-- -------------------- ---- -------
-- -------------------------------------
---------------- -
-------- -------------
--------- ---------
------------------ -
------ -----
------- -----
-------- --- -----
------- --- ----- -----
-------------- ----
---------- -----
------------ --
-------------- --
-
-这里定义了一个 type-ahead 组件，该组件包含一个输入框以及自动补全下拉菜单。data 和 on-select 分别是配置项和回调函数，将在下文中详细说明。
接着，需要在组件 JS 文件中调用 Typeahead 初始化方法：
-- -------------------- ---- -------
-- ----------------------------
------ --------- ---- -------------------
------ --------- ---- ------------------------------------
------ - - - ---- ---------------
------ ------- --------------------------- -
----------- --------------------
------------ ----
----------- ---
------ -
--------------------------
-------------------- ----------
----------------------
--
------------------ -
----------------------- ---------
--
-------- -
---------------- -
---------------------- ------------
-
-
---这里定义了一个名为 Typeahead 的 mixin，作为插件的核心模块。然后，定义了 suggestions 和 searchTerm 两个属性，分别表示自动补全下拉菜单中的数据和用户输入的文本。resource 属性是用于从服务器获取数据的 URL 或本地文件地址。
在 init 方法里，设置了 resource 并调用了 setupTypeahead 方法，它可以配置和初始化 Typeahead。
在 onResults 回调函数中，将数据传递给 suggestions，并在 selectItem 事件处理函数中处理用户选择的项。
配置选项
Ember-Typeahead 提供了一系列选项，可以自定义自动补全下拉菜单的行为和样式。
data：表示下拉菜单的数据源。可以是一个静态数组，也可以是一个动态的 Promise 或解析后的数据。minimumInputLength：定义当用户输入文本长度小于指定值时，自动补全下拉菜单不会弹出。默认值为 1。highlight：定义是否高亮匹配的文本。默认为 true。hint：定义是否显示文本补全项的提示文本。默认为 true。caseSensitive：定义匹配时是否区分大小写。默认为 false。wait：定义等待时间（毫秒），在用户停止输入后，自动补全下拉菜单打开之前的延迟。默认为 300。template：定义如何呈现每个自动补全项。可以是一个函数或一个字符串，用于显示引用的属性名。默认的模板是显示项目的label属性。header：定义自动补全下拉菜单的头部。可以是文本或一个模板字符串。footer：定义自动补全下拉菜单的底部。可以是文本或一个模板字符串。emptyMessage：定义在没有匹配项时显示的文本。可以是文本或一个模板字符串。isLoading：定义 AJAX 请求是否正在进行中。默认为 null。
这里提供几个常见的选项配置：
-- -------------------- ---- -------
-------------------- -
--- ----- - -----
--------------------
---------- -----
----- -----
---------- --
----------- -
------ ------------------------
----- -----------------------
----- -----------------------
-------- --------------------------
----------- -----------------------------
------- -------------------------
------ -----------------------
-
-- -
----- ---------
----------- -------
------- --------------- -------- -
--- --- - -------------------------------------- - ------
------------------------ -- ----------------
---------- -- ------------------------------------
--
---------- -
------- ---- --------------------------- --------------
------ ----- ------------------------------------- -- ------- ---- --------------
----------- -------------- -
------ ------- - --------- - -- - - ---------- - ---------
-
-
---
-这个例子定义了一些选项参数：
highlight：开启高亮匹配文本。hint：启用每次输入时的提示文本。minLength：定义在执行自动补全操作之前需要输入的字符数。classNames：自定义自动补全下拉菜单的 CSS 样式类。
然后，定义了一个数据源 cities，指向一个远程 API。source 方法用于异步获取数据并对其进行转换。
最后，定义了一个模板 suggestion，它使用数据对象的属性定义如何显示自动补全项。而头部和无匹配项时的信息则由 header 和 empty 模板提供。
示例代码
下面给出一段完整的示例代码：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ --------- ---- ------------------------------------
------ - - - ---- ---------------
------ ------- --------------------------- -
----------- --------------------
------------ ----
----------- ---
------------------ -
--- ----- - -----
--------------------
---------- -----
----- -----
---------- --
----------- -
------ ------------------------
----- -----------------------
----- -----------------------
-------- --------------------------
----------- -----------------------------
------- -------------------------
------ -----------------------
-
-- -
----- ---------
----------- -------
------- --------------- -------- -
--- --- - -------------------------------------- - ------
------------------------ -- ----------------
---------- -- ------------------------------------
--
---------- -
------- ---- --------------------------- --------------
------ ----- ------------------------------------- -- ------- ---- --------------
----------- -------------- -
------ ------- - --------- - -- - - ---------- - ---------
-
-
---
--
------------------- -
--- ----- - ---
--- ---- - - -- - - ------------ ---- -
--- --- - ---
--------- - ------------ - -- - - --------------
--------- - -------------
----------------
-
------ ------
--
------------------ -
----------------------- ---------
--
-------- -
---------------- -
---------------------- ------------
-
-
---该组件首先定义了 classNames，suggestions 和 searchTerm 三个属性，以及 didInsertElement 生命周期回调函数。
在该函数中，使用 Typeahead mixin 提供的 transformData 方法将 AJAX 请求返回的 JSON 数据转换成包含 label 和 value 两个属性的数组。
接着，在 Typeahead 初始化时使用了自定义的选项，如 highligh、hint、classNames 和 minLength。
并且使用了一个名为 cities 的数据源，定义了 source 选项和 templates 选项来格式化和呈现自动补全项。与此同时，当用户选择列表项时，selectItem 事件处理函数会相应地更新 searchTerm 属性。
指导意义
在前端开发中，自动补全功能已成为标配。Ember-Typeahead 插件为开发人员提供了快速易用、且高效灵活的解决方案。
采用合理的配置，可以使自动补全功能的用户体验更佳。同时，使用模板和 CSS 样式可实现更灵活、具有特色的自动补全效果。
以上内容及代码示例仅是 Ember-Typeahead 插件的一个简单使用示意，当然还有很多其他应用场景可以去尝试。最后，希望这篇文章能够帮助您更快、更好的使用 ember-typeahead 插件，并为您的前端开发工作带来便利和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1aa563576b7b1ecbf2