jquery ui autocomplete实例

引入jquery ui css js

<link href="js/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet">
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>

构建控件

<div class="form-group">
<div class="col-sm-3">
<label class="detail-title">工号:</label>
</div>
<div class="col-sm-6">
<input type="text" id="employeeNoSearch" placeholder="请输入员工工号" class="ui-autocomplete-input form-control" autocomplete="off"></input>
<input type="text" id="employeeNo" name="employeeNo" style="display:none;" class="ui-autocomplete-input form-control" autocomplete="off"></input>
</div>
</div>

js

//Autocomplete
$("#employeeSearch").autocomplete({
source: function(query,process){
$.ajax({
"contentType":"application/json; charset=UTF-8",
"dataType" : 'json',
"type" : "POST",
"url" : ctx + "/device/employee/"+query.term,//请求数据的url query.term为模糊查询的数据
"data" : {"matchCount":200},//附带的数据
"success" : function(data){
var ebean = []
for (var int = 0; int < data.length; int++) {//temp临时数组
var temp = [];
temp.label = data[int].employeeName +"  "+ data[int].employeeNo;
temp.value = data[int].employeeNo;
ebean.push(temp);
}
return process(ebean);
}
})
},
search:function(event, ui){
$("#employeeNo").val("");
},
select: function(event, ui) {
$("#employeeNoSearch").val(ui.item.label);
$("#employeeNo").val(ui.item.value);
var uistr =ui.item;
// 阻止事件的默认行为
event.preventDefault();
}
});

Autocomplete有一个非常重要的属性参数source，它表示用于自动完成功能的数据集合。

source属性的值可以是一个数组；也可以是一个字符串，用于表示一个远程请求的URL地址，通过处理该URL返回的数据从而获得autocomplete所需的数据；

它还可以是一个回调函数，以便于完成一些复杂的数据处理。

java后台请求处理代码

action

@ResponseBody
@RequestMapping("/employee/{employeeKey}")
public List<EmpBreifBean> employee(@PathVariable("employeeKey") String employeeKey) {
JsonBean bean = new JsonBean();
try {
// 查询该公司下所有员工列表
List<EmpBreifBean> eBean = posPadServiceImpl.getOrgEmployeeList(
UserUtils.getOrgId(), employeeKey);
return eBean;
} catch (Exception e) {
bean.setCode(0);
bean.setMessage("获取公司员工列表失败: [{}]" + e.getMessage());
LOGGER.error("get Investor list error, errorMsg=[{}].", e.getMessage());
}
return null;
}

service

List<EmpBreifBean> getOrgEmployeeList(String tenantIdentifier,String employeeKey);

mapper

select employee_id,name,employee_no from employee
where
org_id = #{orgId}
and (pos_pad_id is null or pos_pad_id = '')
<if test="employeeKey != null">
and ( name like #{employeeKey}"%" or employee_no like #{employeeKey}"%")
</if>

实际效果