|
|
// JavaScript Document
|
|
|
//页面加载好，autoKey应该隐藏
|
|
|
$(document).ready(function(){
|
|
|
//定义高亮变量，控制上下键的选择
|
|
|
//-1代表不高亮任何行
|
|
|
var highlightindex = -1;
|
|
|
//提示层的子层数组
|
|
|
var completesVal;
|
|
|
//将要显示的提示
|
|
|
var keys;
|
|
|
//时间延迟对象
|
|
|
var timeDelay;
|
|
|
|
|
|
//获得输入input的对象
|
|
|
var keyInput=$("#tags");
|
|
|
var keyInputOffset=keyInput.offset();
|
|
|
var autoDiv=$("<div id=\"autoKey\"></div>");
|
|
|
//提示层的样式
|
|
|
autoDiv.hide().css("border","1px solid #999999").css("position","absolute")
|
|
|
.width(keyInput.width())
|
|
|
.css("color","#aaaaaa").css("z-index","10").css("background-color","#FFFFFF").appendTo("body");
|
|
|
|
|
|
|
|
|
|
|
|
//按键按下后与服务器的交互
|
|
|
keyInput.keyup(function(event){
|
|
|
|
|
|
//获取键盘事件对象
|
|
|
var keyEvent=event || window.event;
|
|
|
|
|
|
//判断键盘输入的值得范围
|
|
|
//1.输入的是正常的字母
|
|
|
//2.向上向下键
|
|
|
//3。回车键
|
|
|
var keyCode=keyEvent.keyCode;
|
|
|
|
|
|
|
|
|
if(keyCode !=38 && keyCode !=40 && keyCode != 13){
|
|
|
//获取当前文本框中的值
|
|
|
var currentVal_t=keyInput.val().split(',');
|
|
|
var currentVal = currentVal_t[currentVal_t.length-1];
|
|
|
//如果当前的文本框内容为空，就不在向服务器发送请求
|
|
|
if(currentVal != ""){
|
|
|
//取消上次提交
|
|
|
window.clearTimeout(timeDelay);
|
|
|
//延迟500ms提交,防止频繁提交
|
|
|
timeDelay=window.setTimeout(function(){
|
|
|
$.get("/include/tagindex.asp",{v:currentVal},function(data){
|
|
|
|
|
|
//清空autoDiv的内容并且隐藏
|
|
|
autoDiv.html("");
|
|
|
if ($(data).find("stat") == "0") return;
|
|
|
//对回传的数据抽取，组成一个key的数组
|
|
|
keys=$(data).find("key");
|
|
|
|
|
|
keys.each(function(){
|
|
|
|
|
|
var keyval=$(this).text();
|
|
|
|
|
|
if(keyval !=null){
|
|
|
$("<div>").css("font-size","13px").css("line-height","25px").css("padding-top","1px").html(keyval).appendTo(autoDiv);
|
|
|
}
|
|
|
});
|
|
|
if(keys.length>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","#aaaaaa");
|
|
|
//highlightindex = -1;
|
|
|
highlightindex = -1;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
completesVal.each(function(){
|
|
|
var t=$(this);
|
|
|
t.css("cursor","pointer").mouseover(function(){
|
|
|
//加上mouseover事件
|
|
|
t.css("background-color","#7EC0EE").css("color","#000000");
|
|
|
}).mouseout(function(){
|
|
|
//mouseout事件
|
|
|
t.css("background-color","white").css("color","#aaaaaa");
|
|
|
}).click(function(){
|
|
|
//单击事件
|
|
|
var kIt = keyInput.val().split(",");
|
|
|
kIt[kIt.length-1] = t.text();
|
|
|
keyInput.val(kIt);
|
|
|
autoDiv.hide();
|
|
|
});
|
|
|
});
|
|
|
|
|
|
highlightindex = -1;
|
|
|
autoDiv.css("left",keyInput.offset().left)
|
|
|
.css("top",keyInput.offset().top + keyInput.height() + 20 + "px")
|
|
|
autoDiv.show();
|
|
|
}else{
|
|
|
highlightindex = -1;
|
|
|
autoDiv.hide();
|
|
|
}
|
|
|
},"xml");
|
|
|
},500);
|
|
|
|
|
|
}
|
|
|
|
|
|
}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","#aaaaaa");
|
|
|
}
|
|
|
//移动高亮的指针,
|
|
|
//注意这里的highlightindex++一定要放在if的外面，
|
|
|
// 放在里面如果hightlightindex=-1，则永远也移动不了
|
|
|
highlightindex++;
|
|
|
//判断是否到了最后一个元素
|
|
|
if(highlightindex == completesVal.length){
|
|
|
highlightindex = 0;
|
|
|
}
|
|
|
//高亮当前highlightindex节点
|
|
|
completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000");
|
|
|
}
|
|
|
//向上键的控制
|
|
|
if(keyCode == 38){
|
|
|
if(highlightindex != -1){
|
|
|
completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa");
|
|
|
highlightindex--;
|
|
|
}
|
|
|
if(highlightindex ==-1){
|
|
|
highlightindex=completesVal.length;
|
|
|
}
|
|
|
//高亮当前highlightindex节点
|
|
|
completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000");
|
|
|
}
|
|
|
|
|
|
//enter键的控制
|
|
|
//1.按下enter键，把提示的值传给文本框
|
|
|
//2.关闭提示层
|
|
|
//3.提交
|
|
|
if(keyCode == 13){
|
|
|
|
|
|
if(highlightindex != -1){
|
|
|
//获取当前高亮值
|
|
|
var comsVal = completesVal.eq(highlightindex).text();
|
|
|
|
|
|
//给文本框赋值
|
|
|
var kIt = keyInput.val().split(",");
|
|
|
kIt[kIt.length-1] = comsVal;
|
|
|
//keyInput.val(kIt);
|
|
|
keyInput.val(kIt);
|
|
|
//高亮索引回归到初始化
|
|
|
highlightindex = -1;
|
|
|
//隐藏提示框
|
|
|
autoDiv.hide();
|
|
|
}else{
|
|
|
//commitSearch();
|
|
|
//文本框失去焦点，不然按回车会不停的发出请求
|
|
|
keyInput.get(0).blur();
|
|
|
autoDiv.hide();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
//单击文档关闭提示层
|
|
|
document.onclick=function(){
|
|
|
autoDiv.hide();
|
|
|
highlightindex = -1;
|
|
|
};
|
|
|
});
|