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;
        }

效果如下:

AngularJS 多重搜索——之三重搜索实现_第1张图片

你可能感兴趣的:(AngularJS,搜索)