关于jquery ajax自动完成的一个小例子

之前做了一个下拉菜单，因为数据量过多的原因会导致选择下拉列表的时候会很麻烦，于是想做个类似百度的自动完成的例子。

由于本身技术有限，有不对之处请指教。

实现原理其实很简单，就是在页面加了一个两个Input框和一个div，两个Input分别用来存放自动完成列表所选中的值的id和自动完成框，

div用来填充ajax返回的数据。下面贴代码

<input id="transResourcelId"  name="resourcel" value=""  hidden="hidden" >
<input id="resourcelInput" class="form-control"  οnclick="resourcelKeyUp(1)" οnkeyup="resourcelKeyUp(2)"

οnblur="resourcelBlur()" placeholder="---请选择---"> 

<div id="resourcelFillList" style="background-color: #FFFFFF;border: 1px solid #BCBCBC;

border-collapse: collapse;padding:1px 5px;position: absolute;z-index: 100;max-height: 220px;

overflow-x:hidden;overflow-y:auto;width: 200px;font-size: 12px" hidden="hidden"></div>
//这里div有几个比较重要的属性就是position: absolute;z-index: 100;max-height: 220px;overflow-x:;overflow-y:auto; 怎么用可以自己网上查，然后div

刚开始是隐藏的，通过iput触发ajax获得后台数据。

//Input框键盘敲击后调用后台查找匹配数据
	var resourcelClickSum = 0; 							//用来判断鼠标悬停位置，1代表鼠标焦点在input框，2代表鼠标悬停在div里面，3表示在input和div外面
														//如果不定义一个全局变量，我的这个自动完成会出现第一次点击input框没有选择的时候，点击其他位置
														//div不隐藏
	$(function(){	
		$("#resourcelFillList").hover(function(){		//hover函数，鼠标进入div和移出div进行的函数，自己百度查用法
			resourcelClickSum = 2;	
		},function(){
			resourcelClickSum = 3;
		});	
	});
	
	function resourcelKeyUp(obj) {						//鼠标点击input和键盘敲击后触发的函数
		var resourcel = $("#resourcelInput").val();	
		if(obj==1){										//obj用来判断是鼠标点击还是键盘敲击，1为鼠标点击
			if($.trim(resourcel)=="")
				resourcelClickSum = 1;					//将其置为1后面用于隐藏div
		}
		$.ajax({										//ajax，用法自己查
     	   url: '/manager/petitionHandle/fillList',
     	   data: {
     	       'industry': resourcel,
     	       'id':104356
        	},
        	dataType:"json",
       	 	type: 'POST',
        	success: function(data) {					
        		var html = "";
        		jsonArray = eval(data);
        		var jsonArray=eval(data);
        		if(jsonArray.length > 0){
        			for(var i=0; i
   
   
    
    "+jsonArray[i].NAME+""  
        			}
        			$("#resourcelFillList").html(html);			//html用来给div添加li，也就是填充下拉列表数据
        			$("#resourcelFillList").show();				//填充后div显示出来
        		}
        	}
    	});
		
	}
	
	function resourcelFillClick(obj,id){						//选择div中的li之后，给隐藏的input赋值所选中的id和另外的Input赋值
		$("#transResourcelId").val(id);							//并且隐藏div
		$("#resourcelInput").val(obj);
		$("#resourcelFillList").hide();
	}
	
	function resourcelBlur(){									//input失去焦点后判断鼠标悬停位置，在input和div外则隐藏div
		if(resourcelClickSum==1 || resourcelClickSum==3)
			$("#resourcelFillList").hide();
	}
   
   

//鼠标移动到Li上面颜色改变
function MouseOver(obj){
$(obj).css("background-color","#D1E9E9");

}
//鼠标移开颜色改变
function MouseOut(obj){
$(obj).css("background-color","white");

}

这个是li触发的函数，改变背景色

后台代码

@RequestMapping("fillList")
public void fillList(String industry, String id, HttpServletRequest request, HttpServletResponse response) throws Exception{
response.setCharacterEncoding("utf-8");
List<Map<String, Object>> list = null;
if("".equals(industry))
list = dataDictService.findChildById(Integer.valueOf(id));



else list=dataDictService.findFillListByName(Integer.valueOf(id),industry);
JSONArray jsonArray=JSONArray.fromObject(list);
response.getWriter().write(jsonArray.toString());
}

第一次写博客，不知道怎么排版，慢慢改进。。。。