ionic-基於angularjs和javascript實用的頂部搜尋過濾元件
阿新 • • 發佈：2019-01-25
實現的功能：
1、定義模板主題
2、自定義icon圖示
3、高內聚低偶合，只需簡單配置即可使用
4、區域性搜尋（在已顯示的頁面內容中進行過濾搜尋）
5、全域性搜尋（根據關鍵詞訪問伺服器進行搜尋）
6、動畫顯示出現，包括頂部下拉顯示搜尋元件和從左向右顯示元件
具體的用法：
1、引入js和css：
<link rel="stylesheet" type="text/css" href="js/filterBar/ionic.filter.bar.css">
<script type="text/javascript" src="js/filterBar/ionic.filter.bar.js"></script>
2、在modual中包含依賴模組bing.ionic.filter.bar
angular.module('starter',['ionic','bing.ionic.filter.bar'];
3、配置說明
（1）初始化配置$ionicFilterBarConfigProvider
.config(function($ionicFilterBarConfigProvider) {
//filterBar的主題，可以由以下這些值,預設light
light，stable，positive，calm，balanced，energized，assertive，royal，dark
$ionicFilterBarConfigProvider.theme('calm');
//清除搜尋框icon圖示，預設ion-ios-close
$ionicFilterBarConfigProvider.clear('ion-ios-close');
//input輸入框裡顯示的icon，預設ion-ios-search-strong
$ionicFilterBarConfigProvider.search('ion-ios-search-strong');
//是否顯示背景幕，true OR false
$ionicFilterBarConfigProvider.backdrop();
//動畫變換，horizontal(水平) OR vertical(垂直)
$ionicFilterBarConfigProvider.transition('vertical');
//搜尋框佔位符提示
$ionicFilterBarConfigProvider.placeholder('搜尋');
})
（2）使用服務時的動態配置，相同的項將會覆蓋初始配置
$ionicFilterBar：是一個服務，在控制器依賴後，直接如下使用，動態配置
filterBarInstance：是返回的一個取消例項函式
比如再重新整理的時候，將filterBar取消
*$scope.refreshItems = function() {
if(filterBarInstance) {
filterBarInstance();
filterBarInstance = null;
}
}
$scope.items：就是所有的顯示的item資料
配置項：
items：存如的所有item資料，陣列型別
update：搜尋之後的回撥呼叫資料，第一個引數filteredItems是搜尋返回的資料，傳給$scope.items顯示
第二個引數filterText是搜尋的關鍵詞
cancel：filterBar刪除後觸發的回撥函式
done：filterBar顯示出來後觸發的回撥函式
delegateHandle：檢視的delegate-handle,指定item資料由哪一個檢視顯示，必須設定
isGloableSearch：全域性搜尋還是在已有的內容上進行過濾，true代表全域性搜尋，false代表是過濾
resource: 如果isGloableSearch=true，則resource必須設定，值是一個factory的resource物件,定義請求遠端服務的搜尋，必定寶航一個search方法
eg:
app.factory('$searchResource',['$resource',function($resource){
return $resource('http://192.168.1.101/lianxi/XML/advanced/api/web/v1/users/:userId',{'userId':'@id','access-token':123456789},{
search: {
method: 'get',
isArray: true,
cache: true,
//過濾器處理
interceptor: {
response: function(response) {
return response.data;
},
responseError: function(rejection) {
}
}
},
});
}]);
在我們的$ionicFilterBar這個服務內部程式碼裡的處理：
scope.resource.search({'keywords':filterText}, function(result){
// 返回的是json資料 | array,有服務端或者resource服務提前處理
if(result) {
// 隱藏載入提示
$ionicLoading.hide();
// 呼叫update函式，在頁面顯示資料
$timeout(function() {
// 更新查詢到的資料，呼叫回撥函式
scope.update(result,filterText);
// 同時滾動條回到頂部
scope.scrollItemsTop();
},100);
}else {
return false;
}
/*
上面可以看到$searchResource這個服務定義請求的url和一些預設引數，底層程式碼將會組合keywords，然後訪問遠端的伺服器搜尋，最終返回資料，然後呼叫update()回撥顯示搜尋到的資料。
*/
cancelText: 區域性搜尋是顯示的取消按鈕，預設'取消',
searchText: 全域性搜尋是顯示的按鈕，預設'搜尋',
isLoadingBackdrop: 全域性搜搜時是否顯示載入圖背景幕，預設true,
loadingText: 全域性搜搜時自定義載入的文字，預設'正在載入',
$scope.showFilterBar = function () {
filterBarInstance = $ionicFilterBar.show({
items: $scope.items,
update: function (filteredItems, filterText) {
$scope.items = filteredItems;
if (filterText) {
console.log(filterText);
}
},
cancel:function() {
console.log('cancel done');
},
done:function() {
console.log('show done');
},
delegateHandle:'accountscroll',
isGloableSearch:false,
resource:$searchResource;
cancelText: '取消'，
searchText：'搜尋'
isLoadingBackdrop:''
loadingText:''
});
};
1、定義模板主題
2、自定義icon圖示
3、高內聚低偶合，只需簡單配置即可使用
4、區域性搜尋（在已顯示的頁面內容中進行過濾搜尋）
5、全域性搜尋（根據關鍵詞訪問伺服器進行搜尋）
6、動畫顯示出現，包括頂部下拉顯示搜尋元件和從左向右顯示元件
具體的用法：
1、引入js和css：
<link rel="stylesheet" type="text/css" href="js/filterBar/ionic.filter.bar.css">
<script type="text/javascript" src="js/filterBar/ionic.filter.bar.js"></script>
2、在modual中包含依賴模組bing.ionic.filter.bar
angular.module('starter',['ionic','bing.ionic.filter.bar'];
3、配置說明
（1）初始化配置$ionicFilterBarConfigProvider
.config(function($ionicFilterBarConfigProvider) {
//filterBar的主題，可以由以下這些值,預設light
light，stable，positive，calm，balanced，energized，assertive，royal，dark
$ionicFilterBarConfigProvider.theme('calm');
//清除搜尋框icon圖示，預設ion-ios-close
$ionicFilterBarConfigProvider.clear('ion-ios-close');
//input輸入框裡顯示的icon，預設ion-ios-search-strong
$ionicFilterBarConfigProvider.search('ion-ios-search-strong');
//是否顯示背景幕，true OR false
$ionicFilterBarConfigProvider.backdrop();
//動畫變換，horizontal(水平) OR vertical(垂直)
$ionicFilterBarConfigProvider.transition('vertical');
//搜尋框佔位符提示
$ionicFilterBarConfigProvider.placeholder('搜尋');
})
（2）使用服務時的動態配置，相同的項將會覆蓋初始配置
$ionicFilterBar：是一個服務，在控制器依賴後，直接如下使用，動態配置
filterBarInstance：是返回的一個取消例項函式
比如再重新整理的時候，將filterBar取消
*$scope.refreshItems = function() {
if(filterBarInstance) {
filterBarInstance();
filterBarInstance = null;
}
}
$scope.items：就是所有的顯示的item資料
配置項：
items：存如的所有item資料，陣列型別
update：搜尋之後的回撥呼叫資料，第一個引數filteredItems是搜尋返回的資料，傳給$scope.items顯示
第二個引數filterText是搜尋的關鍵詞
cancel：filterBar刪除後觸發的回撥函式
done：filterBar顯示出來後觸發的回撥函式
delegateHandle：檢視的delegate-handle,指定item資料由哪一個檢視顯示，必須設定
isGloableSearch：全域性搜尋還是在已有的內容上進行過濾，true代表全域性搜尋，false代表是過濾
resource: 如果isGloableSearch=true，則resource必須設定，值是一個factory的resource物件,定義請求遠端服務的搜尋，必定寶航一個search方法
eg:
app.factory('$searchResource',['$resource',function($resource){
return $resource('http://192.168.1.101/lianxi/XML/advanced/api/web/v1/users/:userId',{'userId':'@id','access-token':123456789},{
search: {
method: 'get',
isArray: true,
cache: true,
//過濾器處理
interceptor: {
response: function(response) {
return response.data;
},
responseError: function(rejection) {
}
}
},
});
}]);
在我們的$ionicFilterBar這個服務內部程式碼裡的處理：
scope.resource.search({'keywords':filterText}, function(result){
// 返回的是json資料 | array,有服務端或者resource服務提前處理
if(result) {
// 隱藏載入提示
$ionicLoading.hide();
// 呼叫update函式，在頁面顯示資料
$timeout(function() {
// 更新查詢到的資料，呼叫回撥函式
scope.update(result,filterText);
// 同時滾動條回到頂部
scope.scrollItemsTop();
},100);
}else {
return false;
}
/*
上面可以看到$searchResource這個服務定義請求的url和一些預設引數，底層程式碼將會組合keywords，然後訪問遠端的伺服器搜尋，最終返回資料，然後呼叫update()回撥顯示搜尋到的資料。
*/
cancelText: 區域性搜尋是顯示的取消按鈕，預設'取消',
searchText: 全域性搜尋是顯示的按鈕，預設'搜尋',
isLoadingBackdrop: 全域性搜搜時是否顯示載入圖背景幕，預設true,
loadingText: 全域性搜搜時自定義載入的文字，預設'正在載入',
$scope.showFilterBar = function () {
filterBarInstance = $ionicFilterBar.show({
items: $scope.items,
update: function (filteredItems, filterText) {
$scope.items = filteredItems;
if (filterText) {
console.log(filterText);
}
},
cancel:function() {
console.log('cancel done');
},
done:function() {
console.log('show done');
},
delegateHandle:'accountscroll',
isGloableSearch:false,
resource:$searchResource;
cancelText: '取消'，
searchText：'搜尋'
isLoadingBackdrop:''
loadingText:''
});
};