// JavaScript Document //页面加载好,autoKey应该隐藏 //火车车次提示 jQuery(function($) { $.fn.autoCPT = function(options){ var settings = $.extend({}, $.fn.autoCPT.defaults, options); //提示层的子层数组 var completesVal; //将要显示的提示 var keys; //时间延迟对象 var timeDelay; $(this).each(function(){ var highlightindex = -1; var Obj=$(this);//输入框对象 var ObjId = Obj.attr('id'); Obj.attr("autocomplete", "off"); var keyInputOffset=Obj.offset(); if($("#"+settings.autoDID).size()>0){ var autoDiv = $("#"+settings.autoDID); }else{ var autoDiv=$("
"); } autoDiv.html('').hide().css("border","1px solid #999999").css("position","absolute") .width( 240 ) .css("color","#555555").css("z-index",settings.zindex).css("background-color","#FFFFFF").css("padding","0 10px 0 10px").appendTo("body"); Obj.parents("form").bind("keypress",function(e){if( e.keyCode == 13 ){return false;}}); Obj.bind('keyup focus click',function(event){ //获取键盘事件对象 var keyEvent=event || window.event; //判断键盘输入的值得范围 //1.输入的是正常的字母 //2.向上向下键 //3。回车键 var keyCode=keyEvent.keyCode; if(keyCode !=38 && keyCode !=40 && keyCode != 13){ //获取当前文本框中的值 var currentVal=Obj.val(); //如果当前的文本框内容为空,就不在向服务器发送请求 if(currentVal != ""){ hideDv();//隐掉首弹 //取消上次提交 window.clearTimeout(timeDelay); //延迟500ms提交,防止频繁提交 timeDelay=window.setTimeout(function(){ var filterArr = new Array(); var lenArr = settings.stationData.length; var lencur = currentVal.length; for(var i = 0,j=0;i=10)break; } } } autoDiv.html(""); var lenFtArr = filterArr.length; if(lenFtArr == 0) return; for(var i=0; i").css("font-size","13px").css("line-height","25px").css("padding-top","1px") .html(''+filterArr[i][1] + ',' + filterArr[i][2] + ((filterArr[i][4].length>0)?('['+filterArr[i][4]+' Pro.]'):'')).appendTo(autoDiv); } if(lenFtArr>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","#555555"); //highlightindex = -1; highlightindex = -1; } }); completesVal.each(function(){ var t=$(this); t.css("cursor","pointer").mouseover(function(){ //加上mouseover事件 t.css("background-color","#e8f4ff").css("color","#000000"); }).mouseout(function(){ //mouseout事件 t.css("background-color","white").css("color","#555555"); }).click(function(){ //单击事件 Obj.val(t.find('span').text()); var Code = t.attr("data"); var CHNa = "Code_"+Obj.attr("name"); var CHid = "Code_"+Obj.attr("id"); if($("#"+CHid).size()==0){ Obj.after(''); } $("#"+CHid).val(Code); autoDiv.hide(); }); }); highlightindex = -1; autoDiv.css("left",$('#'+ObjId).offset().left+settings.xOffset + "px") .css("top",$('#'+ObjId).offset().top + Obj.outerHeight() + settings.yOffset + "px") autoDiv.show(); }else{ highlightindex = -1; autoDiv.hide(); } },100); } else { showDv(Obj.attr('id'));$("[id="+settings.autoDID+"]").hide();return false; } }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","#555555"); } //移动高亮的指针, //注意这里的highlightindex++一定要放在if的外面, // 放在里面如果hightlightindex=-1,则永远也移动不了 highlightindex++; //判断是否到了最后一个元素 if(highlightindex >= completesVal.length){ highlightindex = 0; } //高亮当前highlightindex节点 completesVal.eq(highlightindex).css("background-color","#e8f4ff").css("color","#000000"); } //向上键的控制 if(keyCode == 38){ if(highlightindex != -1){ completesVal.eq(highlightindex).css("background-color","white").css("color","#555555"); highlightindex--; } if(highlightindex ==-1){ highlightindex=completesVal.length; } //高亮当前highlightindex节点 completesVal.eq(highlightindex).css("background-color","#e8f4ff").css("color","#000000"); } //enter键的控制 //1.按下enter键,把提示的值传给文本框 //2.关闭提示层 //3.提交 if(keyCode == '13'){ event.preventDefault(); if(highlightindex != -1){ //获取当前高亮值 var comsVal = completesVal.eq(highlightindex); //给文本框赋值 Obj.val(comsVal.find('span').text()); var Code = comsVal.attr("data"); var CHNa = "Code_"+Obj.attr("name"); var CHid = "Code_"+Obj.attr("id"); if($("#"+CHid).size()==0){ Obj.after(''); } $("#"+CHid).val(Code) //高亮索引回归到初始化 //highlightindex = -1; //隐藏提示框 autoDiv.hide(); }else{ //commitSearch(); //文本框失去焦点,不然按回车会不停的发出请求 Obj.get(0).blur(); autoDiv.hide(); } } } }); }); document.onclick=function(e){ $("[id="+settings.autoDID+"]").hide(); highlightindex = -1; hideDv(); }; //单击文档关闭提示层 }; $.fn.autoCPT.defaults = { ClassName: 'CHtip', //弹出,消失时间延迟,ms为单位 stationData : [] , xOffset : 0, yOffset : 0, zindex : 10, autoDID : 'autoDIV' }; });