人員模糊查詢指令

     輸入字符串查出全部包含此字符串的姓名

指令代碼：

App.directive('empFuzzySearch', ['Page','$interval', function (Page, $interval) {
    return {
        restrict: 'AE',
        scope: {
        	emp: '=',//將本地作用域上的屬性同父級作用域上的屬性進行雙向的數據綁定
        },
        template: ' <input type="text" id="empNameInput" class="form-control search-item" ng-model="empName" placeholder="員工姓名" autocomplete="off">'+
	     			'<div id="empArrayDiv" style="border: 1px solid #ccc;position: absolute;z-index:10;background-color: #ece7e7;display:none;">' +
	     			'<div ng-repeat="emp in empArray" ng-click="chooseEmp(emp)" style="height: 24px;">'+
	     			'<span ng-bind-html="emp.empNameHtml | to_trusted" style="margin-left: 14px;font-family: PingFangSC-Regular;font-size: 15px;"></span>'+
	     			'</div>'+
	     			'</div>',

        link: function (scope, elem, attrs) {
        	var options = eval('[{' + (attrs.options || '') + '}]')[0];
	    	var url = options.url;// 數據接口
	        var flag = false;
	     	$("#empNameInput").on("keyup",function(){
		   		 flag = true;
		   		 scope.inputTimer = $interval(function(){
		   			 scope.manageData();// 顯示數據
		   		 }, 200);// 時間顯示0.2秒鐘執行一次
	    	});
	    
	        $("#empNameInput").on("keydown",function(){
	        	$interval.cancel(scope.inputTimer); // 終止函數執行
	        	flag = false;
	    	});
	        
	        scope.chooseEmp = function(emp){
		       	 scope.emp = emp;
		       	 scope.empName = scope.emp.empName;
		       	 $("#empArrayDiv").animate({height:'0px'});
		       	 $("#empArrayDiv").css('display','none');
	        };
	        
	        scope.manageData = function() {
	   			if (flag) {
	   				scope.emp = null;
	   				var empNameValue = $("#empNameInput").val();
	   	            if(empNameValue == undefined || empNameValue.replace(/\s/g, "") == "") {
	   	            	scope.empArray = [];
	   	            	$("#empArrayDiv").animate({height:'0px'});
	   	            	$("#empArrayDiv").css('display','none');
	   	            } else {
	   	                Page.ajaxPostQuiet(url, {"empName" : empNameValue.replace(/\s/g, "")}, function (resp) {
	   						var empName = resp.data.empName;// 標誌位
	   						var empNameStr = empNameValue.replace(/\s/g, "")
	   						if(empName == empNameStr){// 同一次請求
	   							scope.empArray = resp.data.empArray;
	   							if(scope.empArray.length == 0){
	   								$("#empArrayDiv").animate({height:'0px'});
	   				            	$("#empArrayDiv").css('display','none');
	   							} else {
	   								var height = 25 * scope.empArray.length;
	   								$("#empArrayDiv").css('display','');
	   								var inputHeight=  $('#empNameInput').height();
	   								var inputTop = $('#empNameInput').position().top+inputHeight+13;
	   								var inputWidth= $('#empNameInput').width()+26;
	   								$("#empArrayDiv").css('width',inputWidth+'px');
	   								$("#empArrayDiv").css('top',inputTop+'px');
	   								$("#empArrayDiv").animate({height:height+'px'});
	   							}
	   		                    for (var i = 0; i <  scope.empArray.length; i++) {
	   		                    	if(scope.empArray[i].empName.indexOf(empNameStr)>-1){
	   		                    		var deptName = scope.empArray[i].deptName;
	   		                    		var empName = scope.empArray[i].empName.replace(new RegExp(empNameStr,'gm'),"<span style=\"margin-left: 0px;color: #108ee9;font-family: PingFangSC-Regular;font-size: 15px;\">"+empNameStr+"</span>");// 替換全部
	   		                    		scope.empArray[i].empNameHtml = empName+"  -- "+deptName+"";// 把值作爲html
	   		                    	}
	   		                    }
	   						}
	   	                });
	   	            }
	   			}
	   			$interval.cancel(scope.inputTimer);// 終止函數執行
	   			flag = false;
	   		}
        }
    };
}]);

頁面引用代碼：

<emp-fuzzy-search emp="emp" data-options="url: 'salaryPayRollDetail/getEmpByEmpName.do'"></emp-fuzzy-search>