Angularjs material implements the search box function

angular-material is a sub-project of AngularJS that provides components that implement the Material Design style.

Material provides a large number of android-style UI components. Using angularjs + Material, it is easy to develop an web interface that is close to native Android 5.x. But in the actual use of the process does not always meet our needs. Developing one component became a learning necessity.

Here is the implementation of 1 component:

// Some of the code was omitted earlier  
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);} // Remove the former 1 A task  
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 style:

.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; 
} 
}

With ng-route makes it easy to implement the APP without refreshing and make your web page more like the app experience.
In maincontroll, reset the message box by listening for ng-route page upcoming jump events,

// Before the page changes , Reset the search box . 
$scope.$on('SearchText.Reset',function(){ $scope.searchConfig={show:false, key:'',delay:1200};}); 
$rootScope.$on('$routeChangeStart', function (event, next) { 
$rootScope.$broadcast('SearchText.Reset'); 
});

Where the search function is needed, it can be implemented in the controller with the following code:

// The value search box is for your own use  
$scope.$emit('Search.Config',{ 
show:true, key:'',delay:800, 
emptyText:" Please enter the : Vendor name , account , The phone   And so on to search .", 
onSearch: function(){ 
return function(v){ 
$scope.merData.query(v); // Call the data query interface of this controller . 
} 
} 
});

The above is this site to introduce Angularjs material to achieve the search box function, I hope to help you!