想要达到效果，当在快递员属性(courierName)文本框（input）中输入字符时，能显示后台的相关数据，并把快递员电话属性(courierId)能回写到文本框（input），如下图：
1.首先引人jquery.autocomplete.css和jquery.autocomplete.js文件
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/ui/jquery.autocomplete.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ui/jquery.autocomplete.js"></script>
2.写javascript文件
<script type="text/javascript">
var dataCouriers;
$(function(){
approvalCourier();
$("#courierName").focus(function() {
autoCompleteInput($("#courierName"), dataCouriers);
});
});
/**ajax调后台**/
function approvalCourier()
{
var courierName = $("#courierName").val();
$.ajax({
url:$("#path").val()+"/admin/userOrder/getDetail",
dataType:"json",
type:"post",
data:{courierName:courierName},
success:function(result){
var courierList = result.courierList
dataCouriers = courierList;
}
});
}
//在jquery.autocomplete.js文件中
//$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event)
//添加中文绑定输入法
//.bind("input", function() {
// @hack:support for inputing chinese characters in firefox
//绑定中文输入法
//onChange(0, true);
//});
function autoCompleteInput(obj,data)
{
$(obj).autocomplete(data,
{
minChars: 1, //搜索词（从第几个开始）在触发autoComplete前用户至少需要输入的字符数，Default:1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表。
width: 310, //下拉框宽度
matchContains: true, //决定比较时是否要在字符串内部查看匹配，如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
autoFill: false, //要不要在用户选择时自动将用户当前鼠标所在的值填入到input框，Default: false
formatItem: function(row, i, max) //回值将用LI元素包含显示在下拉列表中
{
return '<span style="color:gray;padding-right:10px;"> ' + row.courierName + '</span> <span style="color:#005EA7">[' + row.courierId + ']</span>';
},
formatMatch: function(row, i, max) //对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的
{
return row.courierName + row.courierId;
},
formatResult: function(row)
{
return row.courierId;
},
parse:function(data)
{//解释返回的数据，把其存在数组里
var array=eval(data);
var parsed = [];
if(array == null)
{
return parsed;
}
for (var i = 0; i < array.length; i++)
{
parsed[i] =
{
data: array[i],
value: array[i].courierId,
result: array[i].courierName
};
}
return parsed;
}
}).result(function(event, row, formatted) //回调函数，填充对应的属性
{
// alert(row.id);
(obj).val(row.courierName);
$("#courierId").val(row.courierId);
});
}
</script>
3.后台方法
@RequestMapping(value = "/getDetail")
public ModelAndView getDetail(HttpServletRequest request,HttpServletResponse response)
{
//获取网点登入信息
BranchUser user = getBranchInfo.getBranch(request);
String branchId = user.getBranchId();
QueryResult result = null;
Map<String,Object> map = new HashMap<String, Object>();
PageObj pageObj = new PageObj();
map.put("branchId", branchId);
result = this.orderManagerService.getDetail(map);
List<UserOrder> orderList = new ArrayList<UserOrder>();
if(null != result)
{
orderList = result.getQueryList();
pageObj.setTotalCount(result.getTotalCount());
}
List<CourierInfo> lst = new ArrayList<CourierInfo>();
for(int i = 0;i<orderList.size();i++){
CourierInfo uo = new CourierInfo();
uo.setCourierName(orderList.get(i).getCourierName());
uo.setCourierId(orderList.get(i).getCourierId());
lst.add(uo);
}
result.setQueryList(lst);
//把查询的数据转换成json，前台获取调用
String jsonList = JsonUtil.listToJson(lst);
try {
writeJson("{\"courierList\":" + jsonList + "}", response); //组装json中的courierList值，在前台ajax中调用
}catch (IOException e) {
e.printStackTrace();
}
return null;
}