1、首先引用:
<link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="jquery.autocomplete.min.js" type="text/javascript"></script>
2、html代码:
<label>HR Owner:</label>
<input id='hr_Owener' validate="{required:true}" type="text"/>
<input id='hr_Owener_EmpNO_EmpName' type="hidden" />
$(document).ready(function() {
//初始化hrOwener 开始(zhaolei 2013-9-26 新增)
$.ajax({
type: "POST",
url: '/Recruiting/GetHrOwener', //这里可以是控制器里的方法,也可以是定义到页面,比如:'/Recruiting/GetHrOwener.aspx'
//dataType: "json",
success: function(result) {
set = JSON.parse(result);
$('#hr_Owener').bind("input.autocomplete", function() {
$(this).trigger('keydown.autocomplete');
});
$('#hr_Owener').autocomplete(set, {
minChars: 0,
max: 9999,
autoFill: false,
matchContains: true,
width: 180,
scrollHeight: 220,
formatItem: function(data) {
return (data.DisplayName + '[' + data.EmployeeNo + ']');
},
formatMatch: function(row, i, max) {
return row.DisplayName + row.EmployeeNo + row.UserName;
},
formatResult: function(row) {
return row.DisplayName;
}
}).result(function(event, data, formatted) {
$('#hr_Owener_EmpNO_EmpName').val(data.EmployeeNo + "_" + data.DisplayName); //将HROwenerID 和HROwenerName拼接
});
}
});
//初始化hrOwener 结束
}
3、效果如下: