仿百度，谷歌输入框自动提示功能---JSON版，修复上一版的一个BUG

上个文章已经实现自动提示的功能，但是看过的童鞋们都知道我的交互使用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){
							setContent(rvalue,highlightindex);
							highlightindex=-1;
							autonode.hide();
						}else{
							alert($("#content").val());
						}
					}
				}
			}
		);//键盘抬起

		//当文本框失去焦点时的做法
		inputItem.focusout(
			function(){
				//隐藏提示框
				autonode.hide();
			}	
		);

	}
);//reday

 

Servlet:

 

/**
 * @author :LYL
 *@date:2011-4-21,下午11:15:29
 */
package com.lyl.service;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import net.sf.json.JSONArray;
import org.w3c.dom.Document;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

public class Autocomplete extends HttpServlet {

	public void doPost(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
		String userword=URLDecoder.decode(request.getParameter("wordtext"),"utf-8");
		List<String> results=getResultList(userword, basePath);
		JSONArray ja=JSONArray.fromObject(results);
		out.println(ja.toString());
		out.flush();
		out.close();
	}

	/**
	 * 获得匹配的字母，返回List类型
	 * @return
	 */
	private static List<String> getResultList(String userword,String path){
		DocumentBuilderFactory dbf=DocumentBuilderFactory.newInstance();
		List<String> resultlist=new ArrayList<String>();
		try {
			DocumentBuilder db=dbf.newDocumentBuilder();
			Document document=db.parse(path+"/Words.xml");
			NodeList words=document.getElementsByTagName("word");
			int length=words.getLength();
			for(int i=0;i<length;i++){
				Node node=words.item(i);
				//获得字母
				String result=node.getFirstChild().getNodeValue();
				//这边进行一些逻辑处理，字符串的匹配，（后续工作）
				if(result.contains(userword)){
					resultlist.add(result);
				}
			}
		} catch (ParserConfigurationException e) {
			e.printStackTrace();
		} catch (SAXException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return resultlist;
	}

}

 

效果同样实现，大家可以修改试试，要引的包大家在下面下载：

 

评论

2 楼 long5295 2013-10-29  

你说的上个文章，能给个链接吗？

1 楼 潘清山 2012-05-02  

小弟:jquery不是很懂
哪个在输入框的视图在哪呢??