介绍
ngx-smart-search 是一个Angular的可重用组件，旨在为搜索场景提供高效的解决方案。它具有快速响应，具有适应性和易于使用等优点，非常适合于需要按特定条件对数据列表进行搜索的场景。
功能特性
- 按字段搜索
- 模糊搜索
- 支持多个字段搜索
- 计数器显示搜索结果数量
- 清除搜索内容
- 双向绑定搜索关键字
安装
打开终端，切换至项目根目录，执行以下命令：
$ npm install ngx-smart-search --save
用法
在需要使用 ngx-smart-search 的组件中添加以下代码：
导入模块
import { NgxSmartSearchModule } from 'ngx-smart-search';
@NgModule({
imports: [NgxSmartSearchModule]
})添加搜索框
以下是一个简单的例子：
<ngx-smart-search [data]="users"
[searchFields]="['name', 'position']"
(search)="onSearch($event)">
</ngx-smart-search>API
输入属性
data
数据列表。必填项。
data: any[];
placeholderText
搜索框中的占位符文本。
placeholderText: string;
searchFields
搜索用到的字段，支持多个。
searchFields: string[];
debounceTime
搜索 debounce 时间，单位为毫秒。
debounceTime: number;
输出属性
search
搜索事件，当输入框中的内容发生变化时就会触发。
search: EventEmitter<SearchKeyword>;
clear
清除按钮事件，当点击搜索框右侧的清除按钮时就会触发。
clear: EventEmitter<void>;
SearchKeyword
搜索关键字对象。
interface SearchKeyword {
value: string;
field: string;
}示例代码
以下是一个使用 ngx-smart-search 进行用户列表搜索的例子：
在组件中添加以下代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---- - ---- ---------
------ - --------------------- ------------- - ---- -------------------
------------
--------- ----------------
--------- -
---- ------------------
--------------
----------------- --------------
------------------------ -------- ---------
---------------------------
--------------------
-------------------
---- ------------
---- ---------------- ----------- ---- -- ---------------
---- -------------
---- --------------------
-------------
------
---- ------------------
--- --------------------------------------
-- ------------------------------------
------
------
------
------
------
-
--
------ ----- ----------------- -
------ ------ - -
- ----- ------- ------ ------------------- ------ ---------- --
- ----- ------ ------ ------------------ ------ ---------- --
- ----- ---------- ------ ---------------------- ------ ---------- --
- ----- ------- ------ ------------------- ------ ---------- --
- ----- ------- ------ ------------------- ------ ---------- --
- ----- -------- ------ -------------------- ------ ---------- --
- ----- -------- ------ -------------------- ------ ---------- --
- ----- -------- ------ -------------------- ------ ---------- --
- ----- ----------- ------ ----------------------- ------ ---------- --
- ----- ------- ------ ------------------- ------ ---------- --
--
-------------- ------ - -----------
----------------- --------------- ---- -
-- --------- -
------------------ - ---------------------- -- -
------ ------------------------------------------------------------------------
---
- ---- -
------------------ - -----------
-
-
---------- ---- -
------------------ - -----------
-
-User 对象
export interface User {
name: string;
email: string;
phone: string;
}结论
ngx-smart-search 是一个非常好用的 Angular 搜索组件，它的使用非常简单且强大，多个属性和事件满足不同的需求；现在你可以使用 ngx-smart-search 解决任何搜索场景的问题啦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be881e8991b448e5a25