输入字符串查出全部包含此字符串的姓名
指令代码:
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>