仿谷歌自动补全js
来源：互联网 发布：轻捷it 编辑：程序博客网 时间：2024/05/16 10:06
大四那年在东软实习时，编写的一个仿谷歌自动补全的js。而且已改造通用模板，根据onfocus="init('hotKeyword1','1','<%=path %>/google/googlesearch.mvc')"几个关键key在sevice层中控制业务逻辑。
modelgoogle.js
//全局查询采用仿谷歌技术——ardovar divSize = 0;//初始div长度var timeoutId;//设置ajax向服务器请求的延时时间function init(id,donum,path){var highlightindex = -1;//高亮节点，全局用于鼠标和键盘事件的操作var wordInput = $("#"+id);//获取input的id var wordInputOffset = wordInput.offset(); $("body").append("<div id='auto'></div>"); $("#auto").hide().css("border","2px #2828FF solid").css("position","absolute").css("background-color","white").css("z-index","99") .css("top",wordInputOffset.top + wordInput.height() + 14 + "px") .css("left",wordInputOffset.left + "px").width(wordInput.width()+3); wordInput.die("keyup"); wordInput.keyup(function(event) { var myEvent = event || window.event; var keyCode = myEvent.keyCode; //a-z 0-9 小键盘0-9 if((keyCode >= 65 && keyCode <= 90) || keyCode == 8 || keyCode == 46 || (keyCode >= 48 && keyCode <= 57) || (keyCode>=96 && keyCode<=105) || keyCode == 32) { var wordText = wordInput.val(); var autoNode = $("#auto"); if(wordText != "") { clearTimeout(timeoutId); timeoutId = setTimeout(function() {//alert(path+wordText+donum); $.post(path,{wordText:wordText,donum:donum},function(data,textStatus) { autoNode.html(""); $.each(data,function(entryIndex,entry) { //alert(entry); var newDivNode = $("<div style='height:20px;cursor:hand;font-size:13px;font-family:宋体;padding-top:3px;'>").attr("id",entryIndex); newDivNode.html(entry.replace(wordText,"<b><span style='color:#FF5809'>"+wordText+"</span></b>")).appendTo(autoNode); newDivNode.mouseover(function(){ if(highlightindex != -1) { $("#auto").children("div").eq(highlightindex).css("background-color","white"); } highlightindex = $(this).attr("id"); $(this).css("background-color","#D1D1D1"); var conText = $("#auto").children("div").eq(highlightindex).text(); wordInput.val(conText); }); newDivNode.mouseout(function() { $(this).css("background-color","white"); }); newDivNode.click(function() { if(highlightindex != -1) { var comText = $(this).text(); $("#auto").hide(); highlightindex = -1; wordInput.val(comText); } }); divSize = divSize + 1; }); if(divSize != 0) { autoNode.show(); } else { autoNode.hide(); highlightindex = -1; } },"json"); },500); } else { autoNode.hide(); highlightindex = -1; } } //up else if(keyCode == 38) { var autoNodes = $("#auto").children("div"); if(highlightindex != -1) { autoNodes.eq(highlightindex).css("background-color","white"); highlightindex = highlightindex - 1; var conText = $("#auto").children("div").eq(highlightindex).text(); wordInput.val(conText); } if(highlightindex == -1) { highlightindex = autoNodes.length - 1; var conText = $("#auto").children("div").eq(highlightindex).text(); wordInput.val(conText); } autoNodes.eq(highlightindex).css("background-color","#D1D1D1"); } //down else if(keyCode == 40) { var autoNodes = $("#auto").children("div"); if(highlightindex != -1) { autoNodes.eq(highlightindex).css("background-color","white"); } highlightindex = highlightindex + 1; var conText = $("#auto").children("div").eq(highlightindex).text(); wordInput.val(conText); if(highlightindex == autoNodes.length || highlightindex > autoNodes.length) { highlightindex = 0; var conText = $("#auto").children("div").eq(highlightindex).text(); wordInput.val(conText); } autoNodes.eq(highlightindex).css("background-color","#D1D1D1"); } else if(keyCode == 13) { if(highlightindex != -1) { var comText = $("#auto").hide().children("div").eq(highlightindex).text(); highlightindex = -1; wordInput.val(comText); } } });}<!-- 搜索框 --> <div align="center"> <div style="border:solid 0px red; vertical-align: bottom; WIDTH: 800px;padding-top: 35px;"> <input type="hidden" id="hotKeyword" name="hotKeyword" value="${seachSlsRule.ruleKey}"/> <input id="hotKeyword1" value="${seachSlsRule.ruleKey}" style="background-color: #FFFFFF;width: 550px; height: 33px; line-height: 20px; vertical-align: middle;padding: 6px 2px; font-size: 16px; border: 1px #7E9DB9 solid" type="text" onfocus="init('hotKeyword1','1','<%=path %>/google/googlesearch.mvc')" /> <input style="width: 80px;height: 33px;line-height: 20px;color:black; background-color: #EBEBEB;" value="搜索文档" type="button" onclick="CheckKeyWords();"/> <a id="switchAdvSearch" style="cursor:hand;color:black;vertical-align: bottom;"><font style="color: white; font-size: 10px;">高级搜索</font></a> </div> </div>代码下载地址：http://download.csdn.net/download/ardo_pass/9733905
0 0
- 仿谷歌自动补全js
- js 自动补全
- js 自动补全
- js 自动补全
- js自动补全
- JS 实现自动补全
- 简单自动补全（js+css）
- js input框自动补全
- js实现的邮箱自动补全
- 输入框自动补全js代码
- Angular.js Typeahead 自动补全
- js自动补全——接上一篇JavaScript自动补全
- 自动补全
- jquery自动补全
- 自动补全
- vim自动补全
- vim 自动补全
- vim自动补全
- 存一个github地址 颜色、透明度渐变、混合色
- android守护进程、常驻服务保活技术
- Tensorflow的Bazel编程(三)
- .net点选验证码实现思路分享
- （七）剑指offer之Fibonacci数列及其变形
- 仿谷歌自动补全js
- 第一篇
- git常用命令
- 初级学习方法
- Android Studio 工具栏添加图标
- webform常用分页样式DataPager 设计
- SQL Server排序规则
- 微信小程序引爆朋友圈的秘密
- AngularJS ui-sref的简单使用
