前端(关键代码):
记得引入js
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<div class="flex-center" th:if="${role == '1' || role == '2'}">
<label for="merchantName">运营商名:</label>
<input type="text" style="width: 335px;" class="form-control" name="merchantName" id="merchantName">
</div>
('#merchantName').keyup(function(){
$("#merchantName").autocomplete({
minLength: 1,
source: function( request, response ) {
var merchantName = $("#merchantName").val();
$.ajax({
url: "xxx",
dataType: "json",
type:"post",
data: {"merchantName": merchantName},
success: function( data ) {
response($.map( data, function( item ) {
return {
//数据库中用remarks字段存的merchantName
value:item.remarks
}
}));
}
});
}
});
});
后端(关键代码):
@RequestMapping(value = "/autoQueryMerchant")
@ResponseBody
public String autoQueryMerchant(@RequestParam String merchantName){
return JSON.toJSONString(asOperatorRepository.queryByMerchantNameAuto(merchantName));
}
要json转换一下
mapper代码:
<select id="queryByMerchantNameAuto" resultMap="BaseResultMap">
SELECT ao.REMARKS FROM `tb_user` as tu
LEFT JOIN as_operator as ao
ON tu.ID = ao.USER_ID
WHERE
tu.ROLE = '3'
<if test="remarks != null and remarks != ''">
AND ao.REMARKS like concat ('%',#{remarks},'%')
</if>
</select>
参考:
https://www.runoob.com/jqueryui/api-autocomplete.html
https://blog.csdn.net/Hero_QHZ/article/details/65630992