介绍
ember-keyword-complete 是一个为了方便前端开发者实现关键字输入自动完成功能的 npm 包。使用该组件可以快速、简单地完成输入自动完成的功能，同时也支持定制化功能。
安装
使用 npm 安装：
npm install ember-keyword-complete
使用
- 在模板中引入组件
{{#keyword-complete options=options on-select=(action 'selectItem') as |item query|}}
{{item}} - {{query}}
{{/keyword-complete}}- 在组件中传入属性
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ ------- -------------------
-------- --------- --------- ------- ----------
-------- -
---------------- -
---------------------- ----------
-
-
---在 options 中传入一个数组，这是自动完成的候选项列表。使用 on-select 属性传入一个回调函数，该函数会接受用户选择的项作为参数。
高级使用
这是一个可以定制化的组件，根据用户的需求可以对组件进行修改。
- 定制化选项
-- -------------------- ---- ------- ------------------- --------------- ----------------- ------------- ---------- ------------ ------------------------ -------------------- ------- ------ ------------------------- -- ----- -------- -------- - --------- ---------------------
通过使用这些属性可以改变组件的行为：
minChars- 最小匹配字符数，默认为 1。maxResults- 最多显示的条数，默认为 10。loadingMessage- 加载中的提示信息。noResultsMessage- 没有结果的提示信息。searchMethod- 匹配方式，默认为contains，也支持startsWith和endsWith。
- 定制化模板
{{#keyword-complete
options=options
on-select=(action 'selectItem')
template=(partial 'my-custom-template')
as |item query|}}
{{item}} - {{query}}
{{/keyword-complete}}可以使用 template 属性来指定自定义模板。模板中传入两个参数：item 和 query，分别是当前项目和当前查询的字符串。
- 定制化样式
-- -------------------- ---- -------
-------------------------- -
---------- -----
------ -----
----------------- -----
------- --- ----- -----
----------- ------
----------- -------
---------------------- -
-------- ----
------- --------
----------- -
----------------- --------
-
-
-可以使用自定义 CSS 样式来美化下拉菜单。
示例代码
-- -------------------- ---- ------- ------------------- --------------- ----------------- ------------- ---------- ------------ ------------------------ -------------------- ------- ------ ------------------------- ----------------- --------------------- -- ----- -------- -------- - --------- ---------------------
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ - - - ---- ---------------
------ ------- -------------------
-------- ---
- ----- -------- ------ - --
- ----- --------- ------ - --
- ----- ------- ------ - --
- ----- --------- ------ - -
---
-------- -
---------------- -
------------------
-
-
---<script type="text/x-handlebars" data-template-name="my-custom-template">
<div class="my-custom-template">
<span>{{item.name}}</span>
<span>{{query.isEqual(item.name)}}</span>
</div>
</script>-- -------------------- ---- -------
-------------------------- -
---------- -----
------ -----
----------------- -----
------- --- ----- -----
----------- ------
----------- -------
---------------------- -
-------- ----
------- --------
----------- -
----------------- --------
-
-
-
------------------- -
-------- ----
------- --------
---------------- -
------ -----
-
--------------- -
------ ------
------ -----
-
-总结
ember-keyword-complete 是一个方便而且易用的 npm 包，可以快速实现输入自动完成功能，同时又支持定制化样式和模板。本文介绍了组件的使用和定制化，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecbd9