Google智能提示

先来看看共有三个文件,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();
}

时间： 2024-08-01 15:42:30

Google智能提示

Google智能提示的相关文章

JS实现仿google、百度搜索框输入信息智能提示的实现方法

vscode-visualstudio code. c++智能提示

自制基于jQuery的智能提示插件一枚_jquery

Ajax实现智能提示搜索功能_AJAX相关

QT 智能提示设置

asp.net MVC项目中没有easyui插件的智能提示

Google智能路由器OnHub怎么样

关于vs2013工具的之智能提示

dreamweaver 安装Jquery智能提示_jquery