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);}

?

總結

以上是生活随笔為你收集整理的总结4：input文本输入框自动提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。