ajax的简单应用

通过ajax实现简单的搜索下拉框的简单实现

function show1(){
				//获取所有的li标签
				var arr=$("#itemul>li");
				//判断是否有li标签,有就展开
				if(arr.size()>0)
				{
					$("#completeShow").slideDown(300);
				}
				else{
					$("#completeShow").slideUp(300);
				}
			}
			//当失去焦点的时候,将下拉栏收起
			function hidden1(){
				$("#completeShow").slideUp(300);
			}
			
			function klist(nodex){
				//键盘弹起时的事件
				var val=nodex.value;
				//当输入的值为空的时候,收起下拉栏
				//判断是否为空字符
				if(val!=""){
					$.post("${pageContext.request.contextPath}/fill",{word:val},function(data){
						//当返回的值为空的时候收起下拉栏
						//将js对象变为jQuery对象
						var arr=$(data);
						if(arr.size()>0)
						{
							//当有数据的时候,展开下拉栏
						$("#completeShow").slideDown(300);
						}
						else{
						$("#completeShow").slideUp(300);
						}
						//为了防止不同事件造成的数据叠加,这里要将前一次时间的数据置空
						var ul=$("#itemul");
						ul.html("");
						//将返回的数据遍历
						arr.each(function(index,dom){
							//html中所有变量都是var string是错误的
							var str="<li class='list-group-item'><a href='#'>"+dom["word"]+"  ["+dom["pinyin"]+"]"+"</a></li>";
							//将数据放到标签中
							ul.append(str);
						})
						//由于接受的是json,所以这里第四个参数也要写成json
					},"json");
				}
				else{
					//收起
					$("#completeShow").slideUp(300);
				}
			}