本文是记录在开发搜索功能模块中，遇到的问题和解决方法以及思考。在下图片中标记①-⑦位置的地方都是需要注意的地方。
在开发中，我用的都是ajax写的，开始的想法是无刷新页面，看起来体验会好点，不然用地址传值的话，总是需要刷新页面，体验不好。
于是这里就埋下了坑，后面就需要很多判断操作。
下面分为两种场景来说：
一、本页面的搜索。
一些基本的实现我就不一一赘述了，值得注意的几个点列举下。
ajax分页中，当刷新页面的时候，需要保持当前记录的页数。当条件重新选择后，返回过来依然需要保持之前的记录值。
在点击⑥位置的上下页的时候，⑦位置的页面也要随之改变，反之亦然。
二、地址传值请求。
地址传值相应的参数，页面需要根据条件展示相应的结果。
当大分类和小分类同时存在时，只能查询一次，避免查询两次记录。
根据相应的参数，需要展示不同参数的点击状态和显示选中结果。
当地址传值过来的时候，根据条件要自动查询。
总结上面的注意点，就两点。
1、当地址传值请求时，如何避免多次的查询。
解决方法：增加onloads=false条件。
2、记录每次分页数，避免丢失。
解决方法：使用jquery.cookie.js记录分页数，每个查询条件作为键值，拼接一起。
通过上面的分析，我们已经得到需求，那么，我们看代码，删减无关紧要的。
这里需要引入jquery.min.js和jquery.cookie.min.js两个js文件。
html代码：
onclick="showModel(this,'316',1,'现代简约');"> href="javascript:;">现代简约 onclick="showModel(this,'317',1,'简欧');"> href="javascript:;">简欧 onclick="showModel(this,'318',1,'中式');"> href="javascript:;">中式 onclick="showModel(this,'319',1,'新中式');"> href="javascript:;">新中式
javascript代码：
这里主要使用几个函数，可以自行的扩展。
1、$(function({})); 自动加载。
2、showModel(); 主函数，处理点击操作。
3、getCate(); 点击大类，获取小分类的操作。
4、model_soso_append_html();ajax加载数据。
5、model_demo_html();提取页面循环结构。
6、getcomment();点击分页处理函数。
/* 初始化值，用程序做判断，这里不做展示。*/ var style = 0, order = 0, isyear = 0, recommend = 0, bid = 0, sid = 0, page = 1, pagesize = 0, onloads = false, cookie_model_key = ''; /* 页面加载完毕，自动加载数据 */ $(function () { /* 当大分类存在时，触发点击事件 */ if (bid) { $('#gm_bid').find('.active').click(); } /* 当大分类存在，小分类不存在需要加载数据 */ if (bid && !sid) { onloads = true; } /* 当大分类和小分类都存在时，需要加载数据 */ if (!bid && !sid) { onloads = true; } /* 判断当前条件下有没有记录的分页数，有则使用，无则默认1 */ page = $.cookie('cookie_model_' + style + order + isyear + recommend + bid + sid) ? $.cookie('cookie_model_' + style + order + isyear + recommend + bid + sid) : page; model_soso_append_html(keyword, style, order, isyear, recommend, bid, sid, page, onloads); }); /* 主函数 通过获取不同的参数，执行不同的操作 */ function showModel(obj, cateid, type, txt) { /* 切换选中状态 */ $(obj).addClass('active').siblings("li").removeClass('active'); switch (type) { /* 风格 */ case 1: .... /* 大类 */ case 2: .... getCate(cateid); break; /* 小类 */ case 3: .... break; /* 关闭按钮 */ case 4: .... break; /* 排序 */ case 5: .... break; /* 年会员 推荐模型 */ case 6: .... break; } /* 当大分类别手动点击去除时，需要加载数据 */ if (bid == 0) { onloads = true; } /* 判断条件是否已存在分页数 */ page = $.cookie('cookie_model_' + style + order + isyear + recommend + bid + sid) ? $.cookie('cookie_model_' + style + order + isyear + recommend + bid + sid) : 1; /* 执行ajax加载数据 */ model_soso_append_html(keyword, style, order, isyear, recommend, bid, sid, page, onloads); } /* 分类展示 */ function getCate(id) { if (!id) { return false; } $.ajax({ url: "......", type: 'post', dataType: 'json', data: {id: id}, }).done(function (data) { if (data.code == 200 && data.list.length > 0) { onloads = true; $.each(data.list, function (index, item) { ...... }); /* 判断小类是否存在，存在触发点击 */ if (sid != 0) { ...... } } else { ...... } }).fail(function () { return false; }); } /* ajax执行加载数据操作 onload=>true 加载数据 */ function model_soso_append_html(keyword, style, order, isyear, recommend, bid, sid, page, onloads) { if (onloads) { $.ajax({ url: "......", type: 'post', data: {style: style, order: order, isyear: isyear, recommend: recommend, bid: bid, sid: sid, page: page}, dataType: 'json', }).done(function (data) { if (data.status == 200 && data.count > 0) { ...... } else { ...... return false; } }).fail(function () { return false; }); } else { return false; } } /* 普通模型 demo结构 */ function model_demo_html(data) { ...... return html; } /* 点击分页，加载分页数据 */ function getcomment(page) { /* 根据当前的条件存入相应的分页数 */ $.cookie('cookie_model_' + style + order + isyear + recommend + bid + sid, page); /* 执行查询操作 */ model_soso_append_html(keyword, style, order, isyear, recommend, bid, sid, page, onloads); } /* 点击左右箭头切换 */ $('.fp-prev').on('click', function (event) { event.stopPropagation(); $('#commrnt_page').prev().click(); }); $('.fp-next').on('click', function (event) { event.stopPropagation(); $('#commrnt_page').next().click(); });
通过上面的操作，很好的实现功能的需求，也不影响用户的体验。以上就是在开发搜索模块功能时，所遇到的问题和解决方法的思路，记录下来，方便以后查阅和思考。
