简介
ember-typeahead-input是一个方便快速的前端搜索库，该库基于EmberJs，提供自动完成建议，在你的应用程序中通过使用它，你可以轻松地为输入框等元素添加自动完成功能。
该库通过从外部API动态加载数据，并根据指定的选项将数据筛选成建议列表。所有这些都是在自动填充功能下完成的，从而可以方便地补全表单数据。
安装
可以通过npm安装最新版本的 ember-typeahead-input，运行以下命令进行安装：
npm install --save ember-typeahead-input
用法
以下是如何使用ember-typeahead-input库的方法。
添加组件
首先，需要在对应的组件（例如，<input>, <textarea> 等）中添加组件。以下是一个添加到<input>的例子：
{{ember-typeahead-input
inputClass="typeahead"
displayKey="title"
source=someData
onSelected=(action "onSelected")
}}其中：
inputClass：指定目标组件的css类名；displayKey：指定需要显示的数据字段；source：指定你要搜索的数据源，可以是数组或 Promise；onSelected：指定在选择一个建议时调用的事件处理程序（onSelected(event, suggestion)）。
基本设置
创建一个数组来包含要搜索的数据：
-- -------------------- ---- -------
------ ------- -------------------------
------ -
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
--
---接下来，在控制器中为someData设置值：
export default Ember.Controller.extend({
someData: Ember.computed("items", function () {
return new Promise((resolve, reject) => {
resolve(this.get("items"));
});
}),
});现在，可以使用以下部分提供的代码来查询您的数据，并将其包装为与ember-typeahead-input兼容的对象：
{
id: // data item id
[displayKey]: // data item searchable string
}以下是实现以上步骤的官方示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
------ -
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
--
--------- ----------------------- -------- -- -
------ --- ----------------- ------- -- -
------------------------------------ -- -
------ -
--- --------
------------- ----------
--
----
---
---
-------- -
----------------- ---------- -
--------------------------
-
-
---在HTML文件中添加以下内容：
<form>
{{ember-typeahead-input
inputClass="typeahead"
displayKey="title"
source=someData
onSelected=(action "onSelected")
}}
</form>现在，搜索框应该已经成功地为用户提供了建议列表。 这是关于如何使用ember-typeahead-input的基本的示例代码。
总结
通过本文的介绍和示例代码，读者可以了解到 npm 包 ember-typeahead-input的使用方法，并可以轻松地将自动完成功能添加到自己的应用程序中。同时，对于初学者来说，本文也包含了深入解释的示例代码，可帮助他们更好地理解该库的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1aa563576b7b1ecbf4