下面介绍一个实用而且在移动应用中很流行的搜索组件。
实现的功能： 1、定义模板主题 2、自定义icon图标 3、高内聚低偶合，只需简单配置即可使用 4、局部搜索（在已显示的页面内容中进行过滤搜索）5、全局搜索（根据关键词访问服务器进行搜索）
6、动画显示出现，包括顶部下拉显示搜索组件和从左向右显示组件
7、基于angularjs实现，参考了https://github.com/djett41/ionic-filter-bar，并且修复部分bug和增加了全局的请求服务器的搜索功能。
先看一下demo：
全局搜搜：组件下拉实现动画显示，输入关键词，配置好restful的url接口，即可实现到服务器搜索（当然服务器的搜索部分的自行实现）
简单配置即可实现从左到右动画显示
局部过滤功能：在已显示的页面内容中，输入过滤词，即可实心快速的过滤查找合适的内容流显示，例如下面输入11将含有11的内容显示出来，不需要到服务器，直接针对已显示页面内容过滤。
后期整理好代码和详细的文档和配置、使用方法等将在github上开源。
欢迎访问：https://github.com/bingcool
下面是关于用法：
实现的功能： 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:'' }); };
