花一点时间优化一次年迈的后台系统的检索体验

额...

这次的优化过程，其实很简单，前端的同学几乎都能很容易解决，所以，事情的确很小。

起因

最近在帮忙维护公司的一个比较早期的后台系统时，经常有需要检索的页面，每个检索页面都有一个确认检索的按钮，然后筛选项也有很多，有的是下拉菜单，有的是 radio 开关，有的是输入框

随着业务的不断发展，有的页面的检索项目已经增至 8 个左右，这就产生了一个操作效率的问题，在频繁切换检索条件时，不得不设定好筛选项后去按一下【查询】按钮。

所以，就做了一个小小的改进。

改进

由于之前的老系统，还是用的比较老的 webform 结构，系统中大量的数据绑定操作都是用的服务端控件来进行的。这种操作方式，可能在项目初始阶段，受限于当时的开发手段，以及数据级别也不是很大，所以在当时来说可能是最适合的方案。

但由于系统已经运行了有十多年之久，产生了规模较大的数据，因此，后台的检索接口，也需要升级统一。由于之前的逻辑都是写到了 webform 的后台 cs 文件里，且老的项目页面直接关系也不大，所以正好可以局部的做一下重构。

后台的调整，我是通过引入 Unity.Container 这个包，使年迈 webform 框架支持依赖注入，然后对底层的方法进行一下封装，就可以像平常调用接口一样，进行数据交互了。

这部分代码也没什么可贴的，只是一个改进思路。

然后是前台的改进。

刚才说到，前台的问题是，涉及检索业务的页面筛选框，输入框很多，每次调整都需要点击按钮才能去执行检索的动作。

当我把部分检索的后台代码改成以 curd 的设计方式后，前台的调整也就简单了起来

总的来说，是将检索方法以函数的形式封装起来，然后通过 jquery（是的，jquery）的方式监听所有的检索项，从而执行检索动作，省去了点击的操作。

这里监听下拉框的操作就不介绍了，主要是监听输入框，监听的过程需要有一定的延时，而且监听操作最好是公共函数，从而更好地支持所有页面。

相信大家也都有思路，我的做法是，将监听输入框的操作封装成函数，然后，可以传入某个具体元素和一个匿名函数来适配所有页面。

function AutoSearch(elem, callback) {  //搜索关键字  $("#" + elem).on('input propertychange', function (event) {    last = event.timeStamp;    //利用event的timeStamp来标记时间，这样每次事件都会修改last的值，注意last必需为全局变量    setTimeout(function () {    //设时延迟0.5s执行      if (last - event.timeStamp == 0)//如果时间差为0（也就是你停止输入0.5s之内都没有其它的keyup事件发生）则做你想要做的事      {        //getSerialList();        if (typeof callback == "function") {          callback();        }      }    }, 1000);  });}

这样，所有页面在需要监听输入框的地方，传入元素 id 和监听后的要执行的动作，就可以了。