<style type="text/css">
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
.ui-autocomplete {
max-height: 260px;
overflow-y: auto;
prevent horizontal scrollbar
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
$(document).ready( function() {
//兼容火狐浏览器
$('#user').bind( "input.autocomplete", function(){
$(this).trigger('keydown.autocomplete');
}) ;
$( "#user" ).autocomplete({
source: function( request, response ) {
$("#userId").val("");
$.ajax({
url: "${ctx}/view/base/ViewTaskIndicators.action?getUserList=",
data:"userName=" + encodeURI($("#user").val()),
success: function( data ) {
response( $.map( data, function( item ) {
//手动输入文字不选择也可获得所需信息
if(item.name==$("#user").val()){
$("#userId").val(item.id);
}
return {
label: item.name+"("+item.id+")",//下拉框中所显示的内容
value: item.id + ";" + item.name
}
}));
}
});
},
minLength:1,
select: function( event, ui ) {
$("#userId").val(ui.item.value);
},
focus: function() {
return false;
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
$("#user").val($("#userId").val().split(";")[1]);
$("#userId").val($("#userId").val().split(";")[0]);
}
});
}
页面
<tr>
<td class="td_01">人员名称</td>
<td class="td_02"><input name="taskIndicatorsEntity.userName" id="user" style="width:118px;"/>
<input type="hidden" name="taskIndicatorsEntity.userId" id="userId" >
</td>
</tr>
逻辑代码
public Resolution getUserList() {
service = getBean("taskIndicatorsService", TaskIndicatorsService.class);
List<UserEntity> getUserList = service.getUserList(userName, null);
return new JSONResolution(getUserList);
}
public Resolution taskIndicatorsList() {
// 人员
getUserList();
return new ForwardResolution(
"/jsp/report/base/taskIndicators/taskIndicatorsList.jsp");
}