jquery异步筛选搜索的详解

作者：袖梨 2022-06-25

异步筛选搜索（下面简称搜索）是使用ajax发送搜索请求，可追回多个条件，应用的场景很多，比如：百度招聘，逻辑是只有在用户点击相关条件时触发重新请求，只请求内容，从而可以减少http请求和流量。

比如要完成上面百度招聘的搜索功能，先从简单的入手吧～

第一阶段 - 变量

思路是使用js记录下相应的几个变量，然后给元素绑定点击事件，并写入相关的变量，然后发送请求，发送请求的时候带上这些变量，如：

var 月薪 = null;
var 福利 = null;
var 地区 = null;

...

// 单选
$('月薪').on('click', function(){
// 让其他同级的类移除高亮className
// 给当前点击元素添加高亮className

// 让变量等于当前点击元素的参数
月薪 = $(thi).data('id');

// 发送请求
});

// 多选
$('福利').on('click', function(){
// 给当前点击元素toggle高亮className

    // 查找当前元素所有的同级的高亮元素，并生成一个以参数为值的数组赋予变量
    var ids = $(this).siblings('.高亮className').map(function(){
        return $(this).data('id');
    }).get().join(',');

福利 = ids;

// 发送请求
});

...

var 发送请求 = function(){
    $.ajax({
        ...
        data: {
            福利: 福利,
            月薪: 月薪,
            ...
        }
    });
}
在线demo

第二阶段 - 委托

在第一阶段的基础上考虑到委托事件，声明一个缓存对象cache用来存放异步请求时的数据，给所有筛选条件的可点击元素添加data-param-name=参数名用来写入缓存的key，添加data-param-type用来控制选择的类型，比如单选、多选等，添加data-value为选中值，这样就可以写委托了，比如：

1000元
2000元

var cache = {};
$('#J-demo').on('click', 'a', function(){
    var 参数名 = $(this).data('param-name');
    var 类型 = $(this).data('param-type');
    if(类型 === '单选'){
        cache[参数名] = $(this).data('value');
    }

// 操作高亮的类
// 发送请求
});

var 请求 = function(){
    $.ajax({
        data: cache,
    });
}
在线demo

第三阶段 - 插件化

当完成了第二阶段后，发现当筛选的条件越来越多，类型越来越多时，很不好处理，并且还会出现重复请求的bug（当在上一个请求还没有完成又点击触发下一个请求），于是我想把搜索+请求这块写一个公用的方法。。。

搜索插件（暂且这么叫吧）只提供设置数据,删除数据,获取数据,发送请求的功能，然后自己逻辑代码就可以写那些什么多选啊、单选啊、文本框啊、下拉什么的了，可是你会发现逻辑代码要远远的大于搜索插件的代码，是的，但起码思路比较明确了，谁只做谁的事～

完整的例子

搜索 - 插件化
css" href="./search.css">