最近学习了一下Ajax,用jQuery做了一些例子,其中觉得仿Google自动补全这个挺帅的。
也是例子里最复杂的一个,后来我又修改了很长时间,尽量模仿的逼真,但是还是没达到预期效果,对汉字,拼音解析都不支持。
对于这方面我也没啥经验,不知道具体该咋弄。所以分享页面源码。希望园子里有用js处理中文自动补全经验的朋友。
可以帮忙分析一下实现,我最近也快期末考试了(电路,离散没怎么听过,要恶补),没有那么多的时间再研究了。所以偷个懒。
仿Google自动补全,实现细节:
后台是简单的servlet(其实就是负责后台处理数据交互的,没必要非跌用个struts...什么的)
4/loose.dtd">
varhighlightindex=-1;//表示当前高亮节点("");
wordNodes.each(function(i){//i是索引,用来给id赋值 软件开发网
varwordNode=$(this);//获取单词内容
varnewDivNode=$("
").attr("id",i).css("backgroundColor","white");
newDivNode.html(wordNode.text()).appe沈阳网页设计ndTo(autoNode);//新建div节点,加入单词内容
//增加鼠标进入事件,高亮节点
newDivNode.mouseover(fun沈阳网站建设ction(){
//将原来高亮的节点取消高亮
if(highlightindex!=-1){
$("#auto").children("div").eq(highlightindex)
.css("backgroundColor","white");
}
//记录新的高亮索引
highlightindex=$(this).attr("id");
$(this).css("backgroundColor","#3366CC").css("cursor","pointer");
});
//增加鼠标移出事件,取消节点高亮
newDivNode.mouseout(function(){ >
newDivNode.html(wordNode.text()).appe沈阳网页设计ndTo(autoNode);//新建div节点,加入单词内容
//增加鼠标进入事件,高亮节点
newDivNode.mouseover(fun沈阳网站建设ction(){
//将原来高亮的节点取消高亮
if(highlightindex!=-1){
$("#auto").children("div").eq(highlightindex)
.css("backgroundColor","white");
}
//记录新的高亮索引
highlightindex=$(this).attr("id");
$(this).css("backgroundColor","#3366CC").css("cursor","pointer");
});
//增加鼠标移出事件,取消节点高亮
newDivNode.mouseout(function(){ >