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 companywhere company_name like '%companyName%'limit 25* @return*/@RequestMapping("/getH5CompanyAll")@ResponseBodypublic Object getH5CompanyAll(String companyName) {return companyService.findList(companyName);}