仿Google自动补全 jQuery 不含索引处理
自动补全1． 页面有一个文本框，一个自动提示层，一个按
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script><script type="text/javascript" src="../js/autoComplete.js"></script><div style="text-align: left; width: 500px;"><input type="text" id="key" style="width: 400px;height:25px;" /><input type="button" id="commit" style="background-color:#1874CD;width:70px;height:25px;border:0px;color:#ffffff;" value=" 提 交 "/><div id="autoKey"></div></div>
自动提示JavaScript…
//页面加载好，autoKey应该隐藏$(document).ready(function(){ //定义高亮变量，控制上下键的选择 //-1代表不高亮任何行 var highlightindex = -1; //提示层的子层数组 var completesVal;//将要显示的提示var keys; //时间延迟对象 var timeDelay; //获得输入input的对象 var keyInput=$("#key"); var keyInputOffset=keyInput.offset(); var autoDiv=$("#autoKey"); //提示层的样式 autoDiv.hide().css("border","1px solid #999999").css("position","absolute") .css("top",keyInputOffset.top + keyInput.height() + 8 + "px") .css("left",keyInputOffset.left + "px").width(keyInput.width() + 6) .css("color","#aaaaaa").css("z-index","10").css("background-color","#FFFFFF"); //按键按下后与服务器的交互 keyInput.keyup(function(event){ //获取键盘事件对象 var keyEvent=event || window.event; //判断键盘输入的值得范围 //1.输入的是正常的字母 //2.向上向下键 //3。回车键 var keyCode=keyEvent.keyCode; if(keyCode !=38 && keyCode !=40 && keyCode != 13){ //获取当前文本框中的值 var currentVal=keyInput.val(); //如果当前的文本框内容为空，就不在向服务器发送请求 if(currentVal != ""){ //取消上次提交 window.clearTimeout(timeDelay); //延迟500ms提交,防止频繁提交 timeDelay=window.setTimeout(function(){ $.post("../ParseParam",{paramInfo:currentVal},function(data){ //清空autoDiv的内容并且隐藏 autoDiv.html(""); //对回传的数据抽取，组成一个key的数组 keys=$(data).find("key"); keys.each(function(){ var keyval=$(this).text(); if(keyval !=null){ $("<div>").css("font-size","13px").css("height","18px").css("padding-top","1px").html(keyval).appendTo(autoDiv);} }); if(keys.length>0){ //为提示加上鼠标的选择功能 //鼠标over||out会触发事件，并高亮 //单击高亮层关闭提示层，并且把值传给文本框 completesVal=autoDiv.children("div"); //鼠标一移到autoKey上面，上下键的选择就取消 autoDiv.mouseover(function(){ //highlightindex不等于-1说明先前用上下键移动过 if(highlightindex != -1){ //定位到那个节点，取消其高亮 completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa"); //highlightindex = -1; highlightindex = -1; } }); completesVal.each(function(){ var t=$(this); t.css("cursor","pointer").mouseover(function(){ //加上mouseover事件 t.css("background-color","#7EC0EE").css("color","#000000"); }).mouseout(function(){ //mouseout事件 t.css("background-color","white").css("color","#aaaaaa"); }).click(function(){ //单击事件 keyInput.val(t.text()); autoDiv.hide(); }); }); highlightindex = -1; autoDiv.show(); }else{ highlightindex = -1; autoDiv.hide(); } },"xml"); },500); } }else if(keyCode == 38 || keyCode ==40 || keyCode == 13){ //第一步先获得提示框里所有补全信息的数组 // var completesVal=$("#autoKey").children("div");考虑到效率，把这步放到全局 //向下键的控制 if(keyCode == 40){ //如果现在的高亮是存在的，那么我们就要移动highlightindex if(highlightindex != -1){ //去掉当前高亮 completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa"); } //移动高亮的指针, //注意这里的highlightindex++一定要放在if的外面， // 放在里面如果hightlightindex=-1，则永远也移动不了 highlightindex++; //判断是否到了最后一个元素 if(highlightindex == completesVal.length){ highlightindex = 0; } //高亮当前highlightindex节点 completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000"); } //向上键的控制 if(keyCode == 38){ if(highlightindex != -1){ completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa"); highlightindex--; } if(highlightindex ==-1){ highlightindex=completesVal.length; } //高亮当前highlightindex节点 completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000"); } //enter键的控制 //1.按下enter键，把提示的值传给文本框 //2.关闭提示层 //3.提交 if(keyCode == 13){ if(highlightindex != -1){ //获取当前高亮值 var comsVal = completesVal.eq(highlightindex).text(); //给文本框赋值 keyInput.val(comsVal); //高亮索引回归到初始化 highlightindex = -1; //隐藏提示框 autoDiv.hide(); }else{ commitSearch(); //文本框失去焦点，不然按回车会不停的发出请求 keyInput.get(0).blur(); autoDiv.hide(); } } } }); //提交按钮的事件 var commitBtn=$("#commit"); //commitBtn的click事件 commitBtn.click(commitSearch); //提交函数 function commitSearch(){ var cv=keyInput.val(); //cv=encodeURIComponent(cv); window.location.href="../SearchIndex?paramInfo="+cv; // $.get("../SearchIndex",{paramInfo:cv}); } //keyInput失去焦点后关闭提示层 //keyInput.blur(function(){ //autoDiv.hide(); //highlightindex = -1; // });});
后面的一部分被截断了，可以到我的首页，有续。。
页:
[1]