欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angularjs material 实现搜索框功能

程序员文章站 2022-11-19 09:53:57
angular-material 是 angularjs 的一个子项目,用来提供实现了 material design 风格的组件。 material 提供了大量的and...

angular-material 是 angularjs 的一个子项目,用来提供实现了 material design 风格的组件。

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); //调用本控制器的数据查询接口. 
} 
} 
});

以上所述是小编给大家介绍的angularjs material 实现搜索框功能,希望对大家有所帮助!