html部分
<div style="margin-bottom:5px">
<label class="labelStaWidth"></label>
<label class="labelStaWidth"></label>
<label class="labelStaWidth">ユニット名称:</label>
<form:input style="width: 150px;" path="unitName" id="unitName" name="unitName" />
</div>
jquery部分
$("#unitName").autocomplete({
source: function(request, response) {
$.ajax({
url : "${pageContext.request.contextPath}/unitNameSearch",
type : "post",
data : {unitName: request.term},
dataType : "json",
success: function(data) {
response($.map(data, function(item) {
return {
label: item.unitName,
value: item.unitCode
}
}));
}
});
},
focus: function( event, ui ) {
$("#unitCode").val(ui.item.value);
$("#unitName").val(ui.item.label);
return false;
},
select: function(event, ui) {
$("#unitCode").val(ui.item.value);
$("#unitName").val(ui.item.label);
return false;
}
});
response返回ajax取得的list的时候使用$.map(data, function(item)会方便很多,data是取得的list,item是遍历值。label和value是固定的
focus和select是对应动作下进行的操作。ui是选中值。