angularjs material 实现搜索框

Material 提供了大量的android 风格的UI组件，使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的web界面。但在实际使用的过程中并不总是能满足我们的需求。开发一个组件就成了我们必须学习的内容。

下面是一个组件的实现:

//前面省略若干代码
directive('mdSearchInput',[function(){

    return{
        restrict:'E',
        controller:['$scope','$timeout',function($scope,$timeout){
            var tsk=null;
            $scope.delay=1000;
            $scope.on_changed=function(){
                if(null !== tsk) {$timeout.cancel(tsk);} //去掉前一个任务
                tsk = $timeout(function(){
                    $timeout.cancel(tsk);tsk=null;
                   $scope.onSearch()($scope.searchText);
                },$scope.delay);
            };$scope.on_clear=function(){
                var tsk=null;$scope.searchText='';
                tsk=$timeout(function(){
                    $timeout.cancel(tsk);tsk=null;
                    $scope.onSearch()($scope.searchText);
                },100);
            }

        }],
        scope:{
            inputName:      '@mdInputName',
            searchText:     '=?mdSearchText',
            onSearch:       '&?mdSearch',
            placeholder:    '@placeholder',
            delay:            '@delay'
        },
        template:'<div class="md-search-input" layout="row">\
        <input type="text" flex autocomplete="off" ng-model="searchText" name="{{inputName}}" placeholder="{{placeholder}}" ng-change="on_changed()" />\
        <md-button class="md-fab" ng-click="on_clear()" ng-show="searchText!==\'\'"><md-icon md-svg-icon="md-close" style="color:rgba(0,0,0,0.5);"></md-icon></md-button>\
       </div>',
        link:function($scope, $element){

        }
    };
}]);

CSS 样式:

.md-search-input{
  box-sizing: border-box;border: none;box-shadow: none;background: 0 0; border-radius:5px;background: #FFF;margin:0px;position: relative;
  input{outline: 0;font-size: 14px; width: 100%; padding: 0 15px; line-height: 40px;height: 40px;border: none;background:transparent;}
  button,.md-fab,.md-button,button:hover,.md-fab:hover {
    background:transparent !important;
    line-height:40px;height:40px;width:40px;font-size:14px;box-shadow:none !important;margin:0px;padding:0px;
    color:rgba(0,0,0,0.5) !important;
  }
}

配合 ng-route 可以很容易实现无刷新的APP 让您的web页面更加接近app体验，

在 maincontroll中，通过监听 ng-route 的页面即将跳转事件来重置消息框，

 //在页面改变之前,重置搜索框.
    $scope.$on('SearchText.Reset',function(){ $scope.searchConfig={show:false, key:'',delay:1200};});
    $rootScope.$on('$routeChangeStart', function (event, next) {
        $rootScope.$broadcast('SearchText.Reset');
    });

而在需要用到搜索功能的地方，则只需要在控制器里通过如下代码实现：

 //陪值搜索框为己用
    $scope.$emit('Search.Config',{
        show:true, key:'',delay:800,
        emptyText:"请输入:商家名称,账号,电话 等内容以进行搜索.",
        onSearch: function(){
            return function(v){
                $scope.merData.query(v); //调用本控制器的数据查询接口.
            }
        }
    });

调用实例:

<md-search-input flex ng-show="schCfg.show" md-search-text="schCfg.key" md-input-name="key" md-search="schCfg.onSearch()"  placeholder="{{schCfg.placeholder}}" delay="{{schCfg.delay}}"></md-search-input>

效果

angularjs material 实现搜索框

猜你喜欢