﻿
document.write('<div id="panel" style="position: absolute; z-index: 1; width: 240px; padding: 0 8px 8px 8px;display: none; margin-top: 18px;font-size:13px">');
    document.write('<div style="position: absolute; z-index: -1; left: 0px; top: 5px; width: 240px;">');
        document.write('<iframe allowtransparency="true" frameborder="0" style="background-color:transparent;width: 100%; height: 0px; filter: alpha(opacity=0); -moz-opacity: 0"></iframe>');
    document.write('</div>');
    document.write('<div id="search_suggest" style="left: 0px; width:240px; height:400px; overflow-y:auto;position: absolute; top: 5px; z-index:1"></div>');
document.write('</div>');

//下面来开始写JAVASCRIPT。 
//首先创建XMLHttpRequest对象。我把它写成一个方法，以免多次调用。 
var array = new Array();//定义一个全局变量数组，用来存放拆分字符串的值 
var zz = -1;//此为指针，后面用到 

function xmlHttpInitializtions() 
{ 
    try 
    { 
        xmlhttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch(e) 
    { 
        try 
        { 
            xmlhttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch (e2) 
        { 
            xmlhttpRequest = false; 
        } 
    } 
    if (!xmlhttpRequest && typeof XMLHttpRequest != 'undefined') 
    { 
        xmlhttpRequest = new XMLHttpRequest(); 
    } 
}
 

//第二步，创建beKeyUp方法，正是键盘按下后松开时的方法，在文本框那里调用。 
function beKeyUp(type,obj) 
{ 
    var type = document.getElementById("itype").value;
    var key = document.getElementById(obj).value; 
    //有值才POST，这里最好加个Trim()方法，但是JAVASCRIPT没有现成的方法，自己定义。
    if(type == "项目名称" && key.length > 0) 
    { 
        document.getElementById("panel").style.display="";
        xmlHttpInitializtions(); 
        xmlhttpRequest.open("POST","temp/ajax.aspx?t="+escape(type)+"&key=" + escape(key),true);//POST 
        //xmlhttpRequest.onreadystatechange=stateChange;//返回状态调用方法stateChange
        xmlhttpRequest.onreadystatechange=function(){
            if(xmlhttpRequest.readystate==4) 
            { 
                if(xmlhttpRequest.status==200) 
                { 
                    var responseStr=xmlhttpRequest.responseText;//获取返回值 
                    //返回值不为空才执行下面的代码 
                    if(responseStr.length>0)
                    { 
                        //alert(responseStr);
                        array=responseStr.split('|');//根据‘|’拆分，根据自己任意特殊字符，初始化数组 
                        positionDiv(obj);//调用方法，定位DIV显示，具体见方法解释 
                        document.getElementById("search_suggest").innerHTML="";//每次清空DIV内容 
                        for(var i=0;i <array.length;i++) 
                        { 
                            //项值不为空，组合DIV，每个DIV有onmouseover、onmouseout、onclick对应事件 
                            if(array[i]!="")
                            {
                                document.getElementById("search_suggest").innerHTML+=" <div id='item" + i + "' class='itemBg' onmouseover=beMouseOver('" + obj + "'," + i +") onmouseout='beMouseOut(" + i + ")' onclick=beClick('" + obj + "'," + i + ")>" + array[i] + " </div>"; 
                            }
                        } 
                        //最后一个DIV显示 关闭 效果 onclick方法 
                        document.getElementById("search_suggest").innerHTML+=" <div class='item_button' onclick='hiddenDiv();'> 关闭&nbsp; </div>"; 
                        document.getElementById("search_suggest").style.display="inline";
                    } 
                    else 
                    { 
                        document.getElementById("panel").style.display="none"; 
                    } 
                } 
            } 
        } 
        xmlhttpRequest.send(); 
    } 
} 


//定位DIV显示 
function positionDiv(obj) 
{ 
    var DivRef= document.getElementById("panel"); 
    DivRef.style.position = "absolute"; 
    var t=document.getElementById(obj); 
    DivRef.style.top= getAbsolutePos(t).y;//相对文本框的TOP高度，方法见下面 
    DivRef.style.left= getAbsolutePos(t).x ;//相对文本框的LEFT宽度 
    DivRef.style.height=array.length * 20;//DIV的高度等于每行20个象素乘行数（也就是数组的长度，体现全局数组的作用，不然要传入数组长度的参数） 
} 
//实现最后一个DIV 关闭 onclick方法 
function hiddenDiv() 
{ 
    document.getElementById("panel").style.display="none"; 
} 
//定位方法，不做解释 
function getAbsolutePos(el) 
{ 
    var SL = 0, ST = 0; 
    var is_div = /^div$/i.test(el.tagName); 
    if (is_div && el.scrollLeft) SL = el.scrollLeft; 
    if (is_div && el.scrollTop) ST = el.scrollTop; 
    var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST }; 
    if (el.offsetParent) 
    { 
        var tmp = this.getAbsolutePos(el.offsetParent); 
        r.x += tmp.x; 
        r.y += tmp.y; 
    } 
    return r; 
} 

//最后是鼠标效果的方法。 
//函数鼠标经过效果        
function beMouseOverEFF(i) 
{ 
    if ((i>=0)&(i <=array.length-1)) 
    { 
        document.getElementById("item" + i).className="item_high"; 
    } 
} 

//函数鼠标移开效果 
function beMouseOutEFF(i) 
{ 
    if ((i>=0)&(i <=array.length-1)) 
    { 
        document.getElementById("item" + i).className="item_normal"; 
    } 
} 

//函数鼠标经过 
function beMouseOver(obj,i) 
{ 
    document.getElementById(obj).focus(); 
    beMouseOutEFF(zz); 
    zz=i; 
    beMouseOverEFF(zz); 
} 

//函数鼠标移开 
function beMouseOut(i) 
{ 
    beMouseOutEFF(i); 
} 
//函数单击 
function beClick(obj,i) 
{ 
    document.getElementById(obj).value=array[i]; 
    document.getElementById("panel").style.display="none"; 
    document.getElementById(obj).focus(); 
} 
