1. 程式人生 > >AngularJS 多重搜尋——之三重搜尋實現

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

效果如下: