Google智能提示
发布时间：01/15 来源： 浏览：
关键词：
先来看看共有三个文件,test.htm文件是测试文件,css.css样式列表,google.js就是js处理文件了.下面我把代码一一写出来,给大家分享.
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link href="tooltip.css" rel="stylesheet" type="text/css" />
<script src="tooltip.js" language="javascript"></script>
<script language="javascript">
function test()
{
var obj = document.getElementById("msg");
obj.innerText = "测试成功";
}
function ShowWin()
{
var pop = window.createPopup();
var doc = pop.document;
var body = doc.body;
doc.createStyleSheet("tooltip.css");
body.innerHTML = document.getElementById("list").outerHTML ;
pop.show(100, 100, 200, 200, document.body);
}
</script>
</head>
<body>
<span id="msg"></span>
<input type="text" onkeyup="GTTa.OnKeyUp(this);" style="width:200px;" />
<input type="button" value="测试" onclick="ShowWin()" />
<script language="javascript">
var GTTa = new AIToolTip();
</script>
<div class="tooltip" style="display:none;">
<a href="#">1</a>
</div>
</body>
</html>
test文件的代码简单直接复制保存成一个html文件就行了.
下面来看css文件的内容:
.body
{
margin: 0px;
}
.tooltip
{
border-right: black 1px solid;
border-top: black 1px solid;
font-size: 9pt;
border-left: black 1px solid;
border-bottom: black 1px solid;
font-family: 宋体;
background-color: white;
position: absolute;
z-index: 10;
width:100%;
}
.tooltip a
{
display: block;
padding-top: 5px;
padding-left: 5px;
text-decoration: none;
color: black;
cursor: hand;
width:99%;
}
.tooltip a:hover
{
display: block;
padding-top: 5px;
padding-left: 5px;
color: #ffffff;
background-color: blue;
text-decoration: none;
}
上面没什么说的,不懂的去http://www.111cn.net/cssdiv/css.html里面查看
最后就是js文件代码了.
function AIToolTip(){this.keyList=new Array();this.currentSelectedItem=null;this.input=null;this.index=-1;this.length=0;this.qurl="data_format.htm";this.hasFocus=false;this.div=document.createElement("DIV");this.div.className="tooltip";this.div.attachEvent("onmouseout",this.Div_OnMouseOut);this.div.attachEvent("onmouseover",this.Div_OnMouseOver);document.body.appendChild(this.div);AIToolTip.prototype.p=this;}
function AIToolTipItem(t,u,c){this.text=t;this.url=u;this.count=c;}
AIToolTip.prototype.OnKeyUp=function(o){var p=AIToolTip.prototype.p;this.input=o;if(!o.getAttribute("hasTip")){o.setAttribute("hasTip",true);o.attachEvent("onblur",this.Input_OnBlur);}switch(event.keyCode){case 38:this.Previous();break;case 40:this.Next();break;case 37:case 39:break;case 13:p.EnterKey();break;default:this.GetValues();}}
AIToolTip.prototype.EnterKey=function(){if(this.currentSelectedItem!=null){this.input.value=this.currentSelectedItem.innerText;}this.Hide();}
AIToolTip.prototype.Show=function(){var tip=this.div.style;var mo=this.input;var top=mo.offsetTop;var hei=mo.clientHeight;var left=mo.offsetLeft;while(mo=mo.offsetParent){top+=mo.offsetTop;left+=mo.offsetLeft;}tip.top=top+20;tip.left=left;tip.display="";this.div.style.posWidth=this.input.offsetWidth;}
AIToolTip.prototype.Hide=function(){this.div.style.display="none";}
AIToolTip.prototype.Input_OnBlur=function(){var p=AIToolTip.prototype.p;if(p.hasFocus){}else{p.Hide();}}
AIToolTip.prototype.Div_OnMouseOut=function(){var p=AIToolTip.prototype.p;p.hasFocus=false;}
AIToolTip.prototype.Div_OnMouseOver=function(){var p=AIToolTip.prototype.p;p.hasFocus=true;}
AIToolTip.prototype.A_MouseMove=function(){var obj=event.srcElement;var p=AIToolTip.prototype.p;if(p.currentSelectedItem!=null){p.UnSelectItem(p.currentSelectedItem);}p.SelectItem(obj);p.input.value=obj.innerText;p.index=obj.getAttribute("index");p.currentSelectedItem=obj;}
AIToolTip.prototype.A_MouseOut=function(){var obj=event.srcElement;var p=AIToolTip.prototype.p;p.currentSelectedItem=obj;}
AIToolTip.prototype.A_OnClick=function(){var obj=event.srcElement;var p=AIToolTip.prototype.p;p.input.value=obj.innerText;p.Hide();}
AIToolTip.prototype.SelectItem=function(obj){obj.style.backgroundColor="blue";obj.style.color="#ffffff";this.index=obj.getAttribute("index");this.currentSelectedItem=obj;}
AIToolTip.prototype.UnSelectItem=function(obj){obj.style.backgroundColor="";obj.style.color="";}
AIToolTip.prototype.Previous=function(){this.index>0?this.index--:0;if(this.currentSelectedItem!=null){this.UnSelectItem(this.currentSelectedItem);}this.SelectItem(this.div.childNodes(this.index));this.currentSelectedItem=this.div.childNodes(this.index);this.input.value=this.div.childNodes(this.index).innerText;}
AIToolTip.prototype.Next=function(){this.index<this.length-1?this.index++:0;if(this.currentSelectedItem!=null){this.UnSelectItem(this.currentSelectedItem);}this.SelectItem(this.div.childNodes(this.index));this.currentSelectedItem=this.div.childNodes(this.index);this.input.value=this.div.childNodes(this.index).innerText;}
AIToolTip.prototype.AddItem=function(text,total){var a=document.createElement("A");a.innerText=text;a.attachEvent("onmousemove",this.A_MouseMove);a.attachEvent("onmouseout",this.A_MouseOut);a.attachEvent("onclick",this.A_OnClick);a.setAttribute("index",this.length);this.keyList.push(text);this.div.appendChild(a);this.length++;}
AIToolTip.prototype.Search=function(k){var a,b;for(var i=0;i<this.length;i++){a=k.toLowerCase();b=this.keyList[i].toLowerCase();if(b.indexOf(a,0)!=-1){if(this.currentSelectedItem!=null){this.UnSelectItem(this.currentSelectedItem);}var obj=this.div.childNodes(i);this.SelectItem(obj);this.div.style.display="";return;}}}
AIToolTip.prototype.ClearAll=function(){this.div.innerHTML="";this.index=-1;this.length=0;while(this.keyList.pop()!=undefined){}}
AIToolTip.prototype.GetValues=function(){var exp=/S/;if(exp.test(this.input.value)){if(this.length>0){this.Search(this.input.value);}else{this.GetValuesFromUrl();}}else{this.Hide();}}
AIToolTip.prototype.GetValuesFromUrl = function()
{this.ClearAll();var p=AIToolTip.prototype.p;var ajax=new ActiveXObject("Msxml2.XMLHTTP.3.0");ajax.open("GET",this.qurl,true);
ajax.onreadystatechange=function(){if(ajax.readyState==4){var it;eval(ajax.responseText);var i,l;for(i=0,l=list.length;i<l;++i){p.AddItem(list[i].text,list[i].count);}p.Show();}}
ajax.send();
}
