AngularJS 多重搜尋——之三重搜尋實現
阿新 • • 發佈:2019-02-10
因為業務需求,需要對請求回來的ajax資料作搜尋處理,並且需要滿足多重的條件搜尋:
1、完成的搜尋時在本地的搜尋,所以不能依賴ajax
2、思路:將三個搜尋的正則封裝成三個搜尋輔助函式,然後使用的時候,輪流呼叫三個輔助函式,每一次讀取的資料來源是第一次ajax回來的複製資料,避免重複ajax3、使用正則匹配中文或者助記碼,助記碼不區分大小寫
所以,考慮以上條件的情況下完成以下編碼:
//搜素使用的資料 $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; }
效果如下: