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