防google自动补齐,异步调用数据 $(document).ready(function(){ //表示当前高亮的节点 highlightindex = -1; var timeoutId; var wordInput = $("#word"); var wordInputOffset = wordInput.offset(); $("#auto").hide().css("border","1px black solid").css("position","absolute").css("background-color","white") .css("top",wordInputOffset.top+wordInput.height() + 13 +"px") .css("left",wordInputOffset.left).width(wordInput.width() + 5); //控件1自动补全 wordInput.keyup(function(event){ //处理文本框的键盘事件 var myEvent = event||window.event; var keyCode = myEvent.keyCode; //对输入字符的判断 if((keyCode >= 65 && keyCode<=90) || (keyCode >= 48 && keyCode <= 57)||(keyCode>=96 && keyCode<=105) || keyCode ==46 || keyCode == 8 || keyCode == 32){ var wordText = $("#word").val(); var autoNode = $("#auto"); if(wordText!=""){ //把文本框的字符传到服务器端 //清除上次未完成的延时 clearTimeout(timeoutId); timeoutId = setTimeout(function(){ $.post("/wght/wght/bargain/searchIndex.do?word="+wordText,function(data){ //将dom对象data转换为jquery数据 var jqueryObj = $(data); //找到所有word节点 var wordNodes = jqueryObj.find("word"); autoNode.html(""); //遍历word,将起放入对话框中 wordNodes.each(function(i){ //取单词内容, var wordNode = $(this).text(); //新建div节点,将单词内容放到节点里,将节点放置页面 if(wordNode != null){ $("<div>").css("font-size","13px").css("height","18px").css("padding-top","1px").html(wordNode).appendTo(autoNode); } var completesVal=$("#auto").children("div"); var newDivNode =$("<div>").attr("id",i); //新增鼠标进入事件,高亮显示 completesVal.mouseover(function(){ if(highlightindex != -1){ $("#auto").children("div").eq(highlightindex).css("background-color","white"); } highlightindex = $(this).attr("id"); $(this).css("background-color","yellow"); }); //新增鼠标移出事件,取消高亮 completesVal.mouseout(function(){ $(this).css("background-color","white"); }); //鼠标单击事件,补全其内容 completesVal.click(function(){ var comText = $(this).text(); $("#auto").hide(); highlightindex=-1; $("#word").val(comText); }); }); //如果有数据,显示之 if(wordNodes.length > 0){ autoNode.show(); }else { autoNode.hide(); highlightindex=-1; } },"xml"); },500); }else{ autoNode.hide(); highlightindex=-1; } }else if(keyCode == 38 || keyCode==40){ //如果输入的是向上38向下40按键 if(keyCode == 38){ //up var autoNodes = $("#auto").children("div"); if(highlightindex !=-1) { autoNodes.eq(highlightindex).css("background-color","white"); highlightindex--; }else{ highlightindex = autoNodes.length -1; } if(highlightindex == -1){ //如果修改索引值以后index变成-1,则将索引中指向最后一个元素 highlightindex = autoNodes.length -1; } //让现在被高亮的内容变成黄色 autoNodes.eq(highlightindex).css("background-color","yellow"); }if(keyCode == 40){ //down var autoNodes =$("#auto").children("div"); if(highlightindex !=-1) { autoNodes.eq(highlightindex).css("background-color","white"); } highlightindex++; if(highlightindex == -1){ //如果修改索引值以后index变成-1,则将索引中指向最后一个元素 highlightindex = 0; } //让现在被高亮的内容变成黄色 autoNodes.eq(highlightindex).css("background-color","yellow"); } }else if(keyCode == 13){ if(highlightindex !=-1) { var comText =$("#auto").hide().children("div").eq(highlightindex).text(); highlightindex=-1; $("#word").val(comText);//将文本框内容改成选中项 //$("form:first").submit(); //提交form。若没有这句话,按下回车后,仅仅只改变了文本框里的内容,但是由于form本身就监控了回车按键默认为submit,提交的是文本框改变之前的内容,解决这个问题最简单的方式就是在文本框内容改变以后强制提交form的内容,此时,提交的内容就是选中项。 }else{ $("#auto").hide(); //让文本框失去焦点 $("#word").get(0).blur(); } } }); })
- 粉丝: 0
- 资源: 2
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 高校教师成果管理小程序的设计与实现springboot.zip
- 基于java+springboot+mysql+微信小程序的微信小程序的图书管理系统 源码+数据库+论文(高分毕业设计).zip
- 俞军产品方法论心得整理输出
- 奶茶点餐小程序ssm.zip
- 基于微信小程序的乡村政务服务系统springboot.zip
- 基于微信小程序的在线选课系统springboot.zip
- 基于java+springboot+mysql+微信小程序的微信小程序养老院系统 源码+数据库+论文(高分毕业设计).zip
- 基于java+springboot+mysql+微信小程序的物流管理系统 源码+数据库+论文(高分毕业设计).zip
- 个人社交名片html代码,改改就能用
- 基于小程序宿舍报修系统的设计与实现ssm.zip
- “村游网”系统的微信小程序开发ssm.zip
- “黄师日报”平安小程序springboot.zip
- 餐厅点餐微信小程序springboot.zip
- 基于vue的订餐小程序springboot.zip
- Android Studio Ladybug(android-studio-2024.2.1.12-cros.deb)
- 基于java+springboot+mysql+微信小程序的闲置品交易平台 源码+数据库+论文(高分毕业设计).zip