1、页面效果
2、引入CSS/JS
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
3、页面布局以及JS
<div class="searchDiv ui-widget">
<input type="search" class="searchInput" id="companyName" placeholder="企业名称" required="true" style="font-size: 16px;">
<div id="recList" style="display:none;">
<!--示例<div class="rec" data-id="ABCY2FJcC4oMDw6Amd3Z1wgDzAvDSFjZnx%2FKB5QLz0wY35wARlUCY0%3D"><span class="highLight">北京</span>市北京饭店</div> -->
</div>
</div>
<!-- JS
使用了H5的input propertychange即时反应
-->
$("#companyName").on("input propertychange",function(){
winner_id = "";
var count = $.trim(this.value).length;
if(count > 100){
this.value = this.value.substring(0,100);
return;
}
if(count == 0){
$("#search").addClass("disabled");
$("#recList").hide();
}else{
$("#search").removeClass("disabled");
getRecList(this.value);
}
});
function getRecList(entName_key) {
var baseUrl = getCtxUrl();
$("#recList").html("");
$.post(baseUrl+"/getH5CompanyAll",{"companyName":$("#companyName").val()},function(r){
if(r){
if(typeof (r)!="undefined"){
var recList = r;
for(var i=0;i<recList.length;i++){
var entName = recList[i].companyName;
// var id = recList[i]._id;
if(entName!="" && entName.length>20){
entName = entName.substr(0,20)+"...";
}
var obj=$("<div class='rec' data-id='' style='text-align: left;'>"+entName.replace(entName_key,"<span class='highLight'>"+entName_key+"</span>")+"</div>");
$("#recList").append(obj);
}
}
}
$("#recList").show();
$(".rec").click(function(){
if($(this).text()!=""){
$("input").val($(this).text());
// winner_id = $(this).attr("data-id");
$("#recList").hide();
}
});
});
}
4、后端编码
/**
* 查询所有企业
SQL: select * from company
where company_name like '%companyName%'
limit 25
* @return
*/
@RequestMapping("/getH5CompanyAll")
@ResponseBody
public Object getH5CompanyAll(String companyName) {
return companyService.findList(companyName);
}