1、页面效果
2、引入CSS/JS
<link rel="stylesheet" href="css/jquery-ui.min.css"><script src="/jquery-1.12.4.js"></script><script src="/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 companywhere company_name like '%companyName%'limit 25* @return*/@RequestMapping("/getH5CompanyAll")@ResponseBodypublic Object getH5CompanyAll(String companyName) {return companyService.findList(companyName);}
