总结4：input文本输入框自动提示

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