|
|
// 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=$("<div id=\""+settings.autoDID+"\"></div>");
|
|
|
}
|
|
|
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<lenArr;i++){
|
|
|
if(settings.stationData[i][3] == 1 || settings.stationData[i][3] == 2){
|
|
|
if(currentVal.toLowerCase() == settings.stationData[i][1].substring(0,lencur).toLowerCase() ){
|
|
|
filterArr.push(settings.stationData[i]);
|
|
|
j ++;
|
|
|
if(j>=10)break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
autoDiv.html("");
|
|
|
var lenFtArr = filterArr.length;
|
|
|
if(lenFtArr == 0) return;
|
|
|
for(var i=0; i<lenFtArr; i++){
|
|
|
$("<div data=\""+filterArr[i][0]+"\">").css("font-size","13px").css("line-height","25px").css("padding-top","1px")
|
|
|
.html('<span>'+filterArr[i][1] + '</span>,' + 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('<input type="hidden" name="'+CHNa+'" value="'+Code+'" id="'+CHid+'" />');
|
|
|
}
|
|
|
$("#"+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('<input type="hidden" name="'+CHNa+'" value="'+Code+'" id="'+CHid+'" />');
|
|
|
}
|
|
|
$("#"+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'
|
|
|
|
|
|
};
|
|
|
}); |