简介
jquery-plugin-filtering是一款基于jQuery开发的前端插件包，主要用于筛选列表显示内容的插件，可以根据多个筛选条件，过滤选中列表中的数据，方便网站设计师和开发人员实现复杂的展示策略。该插件支持多项筛选条件，同时能根据关键词进行联想搜索，使得展示结果更加精准。
使用前准备
在使用该插件前，需要先确保以下内容：
安装jQuery；
下载jquery-plugin-filtering包，或者通过npm命令直接安装。
安装
通过npm进行安装
使用如下命令进行安装：
--- ------- ----------------------- ------
通过下载jquery-plugin-filtering包安装
从github仓库中下载jquery-plugin-filtering包，解压缩后将其拷贝至项目文件夹中，然后在页面中引入该插件：
------- ---------------------- ----------------------------- ------- ---------------------- ----------------------------------------------
使用方式
该插件的使用方式非常简单，只需编写一个HTML结构，指定列表的数据来源和筛选条件，同时在JavaScript代码中添加如下调用即可。
-------------------------- -- -
--- ------- - -
------------ ----------
------------ ----------
------------ ----------
---------------- ----
------------------ ------------
--
--------------------------------------
---API
该插件提供了几个比较常用的API调用方法：
filtering(options)
用于初始化插件，并将指定的options传递给插件。
reFilter()
用于手动更新筛选结果。
setActiveClass()
用于设置筛选结果为当前的列表项。
resetFilters()
用于重置所有选项和搜索内容。
clearActiveFilter()
用于清除所有活动筛选。
示例代码
下面我们来编写一个简单的示例代码，展示jquery-plugin-filtering插件的使用方式。
HTML代码：
---- ---------------------
------
------- -------------- ------------
------- ----------- ---------------------
------- ---------------------- ----------
------- ---------------------- ----------
------- ---------------------- ----------
------- ---------------------- ----------
---------
------- -------------- ------------
------- ----------- ---------------------
------- ------------------ ----------
------- ------------------ ----------
------- ------------------ ----------
------- ------------------ ----------
---------
------ ----------- -------------- ------------------- ---------
-------
----
--- -------------- ------------------- ------------------
-------- ------
-----
--- -------------- ------------------- ------------------
-------- ------
-----
--- -------------- ------------------- ------------------
-------- ------
-----
--- -------------- ------------------- ------------------
-------- ------
-----
--- -------------- ------------------- ------------------
-------- ------
-----
--- -------------- ------------------- ------------------
-------- ------
-----
-----
-- -------------------- ------- ----------
------JavaScript代码：
-------------------------- -- -
--- ------- - -
------------ ----------
------------ ----------
------------ ----------
---------------- ----
------------------ ------------
--
--------------------------------------
---该示例代码中，我们首先定义了一个类名为js-filtering的div容器，其中包含了一个表单和一个ul列表，还定义了三个筛选条件select元素，以及一个搜索框input元素，还有一个p元素用于显示搜索结果为空的提示信息。
接着，我们在JavaScript中，定义了options对象，包含了filterClass，targetClass，searchClass，searchAutoDelay以及itemNotFoundClass等属性，这些属性分别指定了各种元素的类名，搜索联想延时时长以及未搜索到内容时的提示信息类名。紧接着，我们调用了filtering方法，将options传递给插件。
最后，我们在HTML中通过在target元素添加数据类型（data-type）和更多（data-more）属性，并在JavaScript中指定filter条件，从而实现了列表的筛选。
结束语
jquery-plugin-filtering插件提供了一种简单的方法，帮助开发人员和网站设计师快速实现复杂的展示策略。通过掌握jquery-plugin-filtering插件的使用方式，相信你可以更加高效地完成自己的工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005669d81e8991b448e2d58