ionic-基于angularjs和javascript实用的顶部搜索过滤组件

最近看新闻，首先是乐视的资金危机，现在是乐视的裁员，好听点叫“末位淘汰”。
年关将至，不少员工在翘首期盼年终奖。然而也有一部分员工开始恐慌，因为不少企业一到年终都会纷纷忙着裁员。双十一期间，大家正疯狂沉浸在买买买时，滴滴被传出将裁掉部分快车业务员工；上个月，暴风魔镜被传预计裁员50%左右；今年9月，58同城开始推行996工作制，被业界视为“变相裁员”。
去年的互联网高薪挖人、补贴、烧钱模式早已销声匿迹。从今年这波裁员潮可以看出，当前大家正在经历的这轮“寒冬”，对整个互联网行业的从业者而言，是多么痛彻心扉。裁员大潮势不可挡。

不想在移动互联网的浪潮中落伍，不想给“末位淘汰”，还想那点年终奖，大家都得努力、努力、再努力，提升自己的技术资本积累。

下面介绍一个实用而且在移动应用中很流行的搜索组件。

实现的功能：
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:''

    });
};