上个文章已经实现自动提示的功能，但是看过的童鞋们都知道我的交互使用XML做的，XML的传输是十分耗带宽的，用于我们这些做着玩的还可以，但是一旦数据量大起来他就相当的不给力了，所以我想使用JSON格式的数据传输，这样应该会好很多，说实话，之前知道有JSON，但是没学过啊，所以只好先学学JSON，至于JSON如何用我就不介绍了，大家网上搜搜到处都是，如果有什么搜不到的可以给我留言，虽然我不精通，但是基本使用还是能够应付的。

?

好了，言归正传，说说我们这次的主题，这次修复的BUG是什么呢？有童鞋发现了吗？，好吧，没发现也没关系，因为我自己也是这次才发现。那就是setTimeout()的问题，大家在服务器端加个打印输出一下，我们会发现时延并没有起到效果。好了，这次我就不上源码了，也不上图了，直接上修复过的代码，和使用JSON的部分。注意哦，要加上json.js，和一个JSON包，这个我打包给大家上传。

?

JS:

?

//高亮索引
var highlightindex=-1;
var timeDelay;
//设置文本框的内容
function setContent(con,index){
	var context=con.eq(index).text();
	$("#content").val(context);
}

//设置背景颜色
function setBkColor(con,index,color){
	con.eq(index).css("background-color",color);
}

$(document).ready(
	function(){
		//获得输入框节点
		var inputItem=$("#content");
		var inputOffset=inputItem.offset();
		var autonode=$("#auto");
		//设置提示框隐藏
		autonode.hide().css("border","1px black solid").css("position","absolute")
		.css("top",inputOffset.top+inputItem.height()+5+"px")
		.css("left",inputOffset.left+"px").width(inputItem.width()+"px");	

		//当键盘抬起时触发事件执行访问服务器业务
		$("#content").keyup(
			function(event){
				var myevent=event||window.event;
				var mykeyCode=myevent.keyCode;

				//字母，退格，删除，空格
				if(mykeyCode>=65&&mykeyCode<=90||mykeyCode==8||mykeyCode==46||mykeyCode==32){
					//清除上一次的内容
					autonode.html(" ");
					//获得文本框内容
					var word=$("#content").val();
					if(word!=""){
						function mydeal(){
							//将文本框的内容发到服务器
							$.post("Autocomplete",{wordtext:encodeURI(word)},
								function(data){
								var wordNodes=data;
								$.each(data,
									function(i){
									//拼接返回数据
									var newNode=$("<div>").html(data[i]).attr("id",i).addClass("pro");
									//将返回内容附加到页面
									newNode.appendTo(autonode);
									//处理鼠标事件
									var con=$("#auto").children("div");
									//鼠标经过
									newNode.mouseover(
										function(){
											if(highlightindex!=-1){
												setBkColor(con,highlightindex,"white");
											}
											highlightindex=$(this).attr("id");
											$(this).css("background-color","#ADD8E6");
											setContent(con,highlightindex);
										}	
									);
									//鼠标离开
									newNode.mouseout(
										function(){
											$(this).css("background-color","white");
										}	
									);
									//鼠标点击
									newNode.click(
										function(){
											setContent(con,highlightindex);
											highlightindex=-1;
											autonode.hide();
										}
									);
								}	
								);    //each

								//当返回的数据长度大于0才显示
								if(wordNodes.length>0){
									autonode.show();
								}else{
									autonode.hide();
								}
							}
							,"json");//post
						}
						//取消上次提交
						clearTimeout(timeDelay);
						//延迟提交，这边设置的为200ms
						timeDelay=setTimeout(
							mydeal,200);    //settimeout
					}else{
						autonode.hide();
						highlightindex=-1;
					}
				}else{
					//alert();
					//获得返回框中的值
					var rvalue=$("#auto").children("div");
					//上下键
					if(mykeyCode==38||mykeyCode==40){
						//向上
						if(mykeyCode==38){
							if(highlightindex!=-1){
								setBkColor(rvalue,highlightindex,"white");
								highlightindex--;
							}
							if(highlightindex==-1){
								setBkColor(rvalue,highlightindex,"white");
								highlightindex=rvalue.length-1;
							}
							setBkColor(rvalue,highlightindex,"#ADD8E6");
							setContent(rvalue,highlightindex);
						}
						//向下
						if(mykeyCode==40){
							if(highlightindex!=rvalue.length){
								setBkColor(rvalue,highlightindex,"white");
								highlightindex++;
							}
							if(highlightindex==rvalue.length){
								setBkColor(rvalue,highlightindex,"white");
								highlightindex=0;
							}
							setBkColor(rvalue,highlightindex,"#ADD8E6");
							setContent(rvalue,highlightindex);
						}
					}
					//回车键
					if(mykeyCode==13){
						if(highlightindex!=-1){
							setConten