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

效果如下：