//判断元素是否高亮，初始值为-1，表示未有元素高亮 var higthlight=-1; var timeOutId; $(document).ready(function(){ //让div隐藏起来 var autoNode=$("#auto").css("border","2px gray none").height("200px").width("150px"); autoNode.hide(); var inputNode=$("#word"); //给文本框注册键盘事件 inputNode.keyup(function(event){ //处理键盘事件 var myEvent =event||window.event; var kcode=myEvent.keyCode; if(kcode >= 65 && kcode <= 90 || kcode==8 || kcode==46){ //把文本框中的内容取到 var wordText=inp utNode.val(); //把数据发送到服务器 if(wordText!=""){ //清除定时器id clearTimeout(timeOutId); //设定定时器，延迟500ms发送 timeOutId=setTimeout(function(){ $.post("autoCompleteServlet",{word:wordText},function(data){ //把数据转换成jquery对象 var jqueryDom=$(data); //取所有的word节点 var wordNodes=jqueryDom.find("word"); //清空div中的内容 autoNode.html(""); //对word进行遍历 wordNodes.each(function(i){ //取当前word var wordNode=$(this); //创建div节点 var crediv=$("").css("cursor","pointer").attr("id",i); //将内容加入div中 crediv.html(wordNode.text()); //鼠标进入时高亮选中内容 crediv.mouseover(function(){ if(higthlight!=-1){ $("#auto").children("div").eq(higthlight) .css("background-color","white"); } higthlight=$(this).attr("id"); $(this).css("background-color","gray"); }); crediv.mouseout(function(){ $(this).css("background-color","white"); }); crediv.click(function(){ var HightText=$(this).text(); higthlight==-1; $("#word").val(HightText); $("#auto").hide(); }); //将创建 的div加进去 autoNode.append(crediv); }); //如果服务器有数据返回，则让div显示 if(wordNodes.length>0){ var offset=inputNode.offset(); autoNode.show().css("position","absolute").css("left",offset.left+(-2)+"px").css("top",offset.top+$("#word").height()+6+"px"); }else{ autoNode.hide(); //所有都隐藏了，也就没有高亮元素，恢复初始值 higthlight=-1; } },"xml"); },500); }else{ autoNode.hide(); higthlight=-1; } }else if(kcode==38||kcode==40){ //如果输入的是向上(38)键或向下(40)键 //向上移动 if(kcode==38){ //取得auto的div元素下的所有div var autoNodes=$("#auto").children("div"); if(higthlight!=-1){ //如果以前有元素被 高亮了，则将其它颜色改为白色 autoNodes.eq(higthlight).css("background-color","white"); higthlight--; }else{ higthlight=autoNodes.length-1; } if(higthlight==-1){ higthlight=autoNodes.length-1; } autoNodes.eq(higthlight).css("background-color","gray"); } if(kcode==40){ //向下移动 //取得auto的div元素下的所有div var autoNodes=$("#auto").children("div"); if(higthlight!=-1){ //如果以前有元素被 高亮了，则将其它颜色改为白色 autoNodes.eq(higthlight).css("background-color","white"); } higthlight++; if(higthlight==autoNodes.length){ higthlight=0; } autoNodes.eq(higthlight).css("background-color","gray"); } }else if(kcode==13){ //下拉框有高亮内容 if(higthlight!=-1){ var HightText=$("#auto").hide().children("div").eq(higthlight).text(); higthlight==-1; $("#word").val(HightText); }else{ //下拉框没有高亮内容 sub(); $("#auto").hide(); $("#word").get(0).blur(); } } }); //给button注册个事件 $("input[type='button']").click(sub); }); function sub(){ alert("文本框中的["+$("#word").val()+"],被提交了"); } ...展开收缩
(系统自动生成,下载前可以参看下载内容)
下载文件列表
相关说明
- 本站资源为会员上传分享交流与学习,如有侵犯您的权益,请联系我们删除.
- 本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行百度。
- 本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用WinRAR最新版进行解压.
- 如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录反馈给我们.
- 下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录反馈给我们，经确认后退回积分.
- 如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.
