仿百度，谷歌输入框自动提示功能---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=$("").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 results=getResultList(userword, basePath);
JSONArray ja=JSONArray.fromObject(results);
out.println(ja.toString());
out.flush();
out.close();
}
/**
* 获得匹配的字母，返回List类型
* @return
*/
private static List getResultList(String userword,String path){
DocumentBuilderFactory dbf=DocumentBuilderFactory.newInstance();
List resultlist=new ArrayList();
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
效果同样实现，大家可以修改试试，要引的包大家在下面下载：