jeesite 两种不同位置的联想补充实现（一）

第一种方式的实现效果

实现：

<#form:form id="searchForm" model="${material}" action="${ctx}/base/material/selectListData" autocomplete="off" method="post" class="form-inline hide"
					data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">				
				<div class="form-group">
					<label class="control-label">${text('名称')}：</label>
					<div class="control-inline">
						<#form:input id="fname"  path="fname" maxlength="50" class="form-control width-120" onkeyup="change()"/><!--  url="${ctx}/base/material/findByFname" -->
					</div>
					<div id="ac_results">
							<ul id = "ulnew"></ul>
					</div>
				</div>              
				<div class="form-group">
					<button type="submit" class="btn btn-primary btn-sm">${text('查询')}</button>
					<button type="reset" class="btn btn-default btn-sm">${text('重置')}</button>
				</div>
			</#form:form>

 联想补充+每次显示10条，通过滑动的方式在添加

js

function change(){
	 		var fname=$("#fname").val();
	 		$("#ac_results").css("display", "block");
			var isbool=true;//标志
			var num=1;//页数
				$.ajax({
					type:"POST",//增加post，避免造成传到后台乱码
					dataType: "json",
					url: "${ctx}/base/material/findByFnames",
					data: {
						fname:fname,
						num:1
					},
					success: function(data) {
                        if(data.length==0){
							$("#ac_results").css("display", "none");
						}
						if(data.length<10){
							isbool=false;
						}else{
							num+=1;
						}
						if($("ul").find("li").length > 0){
							$("ul").find("li").remove();
							for(var i =0 ;i<data.length;i++){
								 $("#ulnew").append("<li onclick='writeSystemCode(this)'>" + data[i].fname + "</li>");
							}
						}else{
							for(var i =0 ;i<data.length;i++){
								 $("#ulnew").append("<li onclick='writeSystemCode(this)'>" + data[i].fname + "</li>");
							}
						}
						if(isbool && num>=2){
							test(isbool,num);
						}
					}
				}); 
			
				 
			//实现点击非指定位置隐藏
			$(document).click(function(){
				$("#ac_results").hide();
			});	
			$("#ac_results").click(function(event){
			    event.stopPropagation();
			});
		
}
function writeSystemCode(p){
	$("#fname").val(p.innerHTML);
	$("#ac_results").css("display", "none");
}
function test(isbool,num){
	// 设置ajax同步
	$.ajaxSettings.async = false;
		$("#ac_results").scroll(function(){
			var p = $("#fname").val();
			var scrollTop = $(this).scrollTop();
			var scrollHeight = $(this).height();
			var windowHeight = $("#ulnew").height();
			if (scrollTop + scrollHeight >= windowHeight && isbool==true) {
				$.ajax({
					type:"POST",//增加post，避免造成传到后台乱码
					dataType: "json",
					url: "${ctx}/base/material/findByFnames",
					data: {
						fname:p,
						num:num
					},
					success: function(data) {
						isbool=false;
						if(data.length ==10){
							for(var i =0 ;i<data.length;i++){
								 $("#ulnew").append("<li onclick='writeSystemCode(this)'>" + data[i].fname + "</li>");
								 isbool=true;
							}
						}else{
							isbool=false;
							for(var i =0 ;i<data.length;i++){
								 $("#ulnew").append("<li onclick='writeSystemCode(this)'>" + data[i].fname + "</li>");
							}
						}
					}
				});
				num+=1;
			}
		});
}

css 

#ac_results {
		position:absolute;
		padding: 0px;
		border-radius:4px;
		border: 0px solid white;
		background-color:white ;
		overflow:auto;
		z-index: 99999;
    	left: 217.8px;
    	margin-top: -1px;
    	margin-left: 14px;
    	height: 100px;
	    width: 240px;
    	display:none;
	}
	#ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding-left: 1px;
	margin-left: 4px;
}
	#ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	font: menu;
	font-size: 16px;
	line-height: 20px;
	overflow: hidden;
}
	#ulnew li:hover{
		background-color:  #E5E1E1;
	}

 后台：

    @RequestMapping(value = "findByFnames")
    @ResponseBody
    public List<Material> findByFnames(Material material){
    	return materialService.findListByLikeFname(material);
    }
    

    /**
     * 根据物料名称获取详细信息
     */
    public List<Material> findListByLikeFname(Material material){
    	//material.setPage(new Page<Material>(material.getNum(), material.getPageNo()));
    	material.setPage(new Page<Material>(material.getNum(), 10));
    	return dao.findList(material);
    }