AngularJS 多重搜索——之三重搜索实现

因为业务需求，需要对请求回来的ajax数据作搜索处理，并且需要满足多重的条件搜索：

1、完成的搜索时在本地的搜索，所以不能依赖ajax

2、思路：将三个搜索的正则封装成三个搜索辅助函数，然后使用的时候，轮流调用三个辅助函数，每一次读取的数据来源是第一次ajax回来的复制数据，避免重复ajax

3、使用正则匹配中文或者助记码，助记码不区分大小写

所以，考虑以上条件的情况下完成以下编码：

//搜素使用的数据 $scope.tiaoxingmaSousuo = "";//用户输入的条形码数据 $scope.shangpinSousuo = "";//用户输入的商品数据 $scope.kehuSousuo = "";//用户输入的客户数据 //清空请求数据 $scope.cdbqList = {};//展示数据 $scope.cdbqList_Copy = {};//用于搜索的数据 //三联搜索 //条形码搜索 $scope.$watch('tiaoxingmaSousuo', function () { if ($scope.cdbqList_Copy.length>0) { var info = $scope.cdbqList_Copy; //商品搜索不为空的时候搜索 if ($scope.shangpinSousuo) { info = $scope.shangpinFuzhu(info); } //客户搜索不为空的时候搜索 if ($scope.kehuSousuo) { info = $scope.kefuFuzhu(info); } //条形码搜索不为空的时候搜索 if ($scope.tiaoxingmaSousuo) { info = $scope.tiaoxiangmaFuzhu(info); } $scope.cdbqList = info; } }); //商品搜索 $scope.$watch('shangpinSousuo', function () { if ($scope.cdbqList_Copy.length > 0) { var info = $scope.cdbqList_Copy; //商品搜索不为空的时候搜索 if ($scope.shangpinSousuo) { info = $scope.shangpinFuzhu(info); } //客户搜索不为空的时候搜索 if ($scope.kehuSousuo) { info = $scope.kefuFuzhu(info); } //条形码搜索不为空的时候搜索 if ($scope.tiaoxingmaSousuo) { info = $scope.tiaoxiangmaFuzhu(info); } $scope.cdbqList = info; } }); //客户搜索 $scope.$watch('kehuSousuo', function () { if ($scope.cdbqList_Copy.length > 0) { var info = $scope.cdbqList_Copy; //商品搜索不为空的时候搜索 if ($scope.shangpinSousuo) { info = $scope.shangpinFuzhu(info); } //客户搜索不为空的时候搜索 if ($scope.kehuSousuo) { info = $scope.kefuFuzhu(info); } //条形码搜索不为空的时候搜索 if ($scope.tiaoxingmaSousuo) { info = $scope.tiaoxiangmaFuzhu(info); } $scope.cdbqList = info; } }); //条形码搜索辅助函数 $scope.tiaoxiangmaFuzhu = function (list) { var sou = $scope.tiaoxingmaSousuo; var data = []; for (var i = 0; i < list.length; i++) { var str = list[i].txm; var patt1 = new RegExp(sou); var result = patt1.test(str);//匹配用户输入的条形码数据 if (result) { data.push(list[i]); } } return data; } //客户搜索辅助函数 $scope.kefuFuzhu = function (list) { var sou = $scope.kehuSousuo; var data = []; for (var i = 0; i < list.length; i++) { var str = list[i].Ssa_Name; var zhuju = list[i].Ssa_Code; var patt1 = new RegExp(sou); var patt2 = new RegExp(sou, "i"); var result = patt1.test(str);//匹配用户输入的中文 var resultZhuju = patt2.test(zhuju);//匹配用户输入的助记码 if (result || resultZhuju) { data.push(list[i]); } } return data; } //商品搜索辅助函数 $scope.shangpinFuzhu = function (list) { var sou = $scope.shangpinSousuo; var data = []; for (var i = 0; i < list.length; i++) { var str = list[i].Goods_Name; var zhuju = list[i].Good_Code; var patt1 = new RegExp(sou); var patt2 = new RegExp(sou, "i"); var result = patt1.test(str);//匹配用户输入的中文 var resultZhuju = patt2.test(zhuju);//匹配用户输入的助记码 if (result || resultZhuju) { data.push(list[i]); } } return data; }

效果如下：