/**Author:tantaiyizu date:2007-11-5**/var $ = function(el){
return (typeof el == 'object')?el:document.getElementById(el);
};
var DxjBox = function(pDiv ,DataMethod, _width, _height){
_DxjBox = this;
this.pDiv = pDiv;
this.obj = null;
this.menu = null;
this.ItemID = "_item";
this.GetData = DataMethod;
this.width = _width;
this.height = _height;
this.init = _init;
this.OverItemObj = null;
this.LoadMenu = _LoadMenu;
this.ShowMenu = _ShowMenu;
this.CloseMenu = _CloseMenu;
this.OverItem = _OverItem;
this.ClickItem = _ClickItem;
this.ItemKeyDown = _ItemKeyDown;
this.init();
};
var _init = function(){
var strInput = "<input id='_obj' style='width:"+ this.width +";height:"+ this.height +"' "
     + "onkeypress='_DxjBox.LoadMenu();_DxjBox.ShowMenu()' "
 + "ondblclick='_DxjBox.LoadMenu();_DxjBox.ShowMenu()' "
 + "onkeydown='_DxjBox.ItemKeyDown(event)' "
 + "/>";
var strMenu  = "<div id='_menu' style='display:none;position:absolute;z-index:100;padding:2 2 2 2;"
     + "overflow-y:auto;border:1px solid black;font-size:12px;height:150px;' "
 + ">"
     + "</div>";
this.pDiv.innerHTML = strInput + strMenu;
this.obj = $("_obj");
this.autoComplete = "off";
this.menu = $("_menu");
this.menu.style.width = 152;
this.menu.style.left = this.obj.offsetLeft;
this.menu.style.top = this.obj.offsetTop + 21;
if(typeof this.height != "undefined")
{
this.menu.style.top = this.obj.offsetTop + (parseInt(this.height));
}
if(typeof this.width != "undefined")
{
this.menu.style.width = this.width;
}
document.onkeydown = function(){
if(event.keyCode == 13)
{
//_DxjBox.CloseMenu();
}
};
};
var _LoadMenu = function(){
var data = this.GetData(this.obj.value);
var strInner = "";
if(typeof data == "object")
{
for(var i=0;i<data.length;i++)
{
strInner += "<div id='_item' style='cursor:default;' index='"+ i +"' "
  + "onmouseover='_DxjBox.OverItem(this)' onclick='_DxjBox.ClickItem(this)' "
  + ">"+ data[i] +"</div>";
}
}
this.menu.innerHTML = strInner;
};
var _ShowMenu = function(){
this.menu.style.display = "";
};
var _CloseMenu = function(){
this.menu.style.display = "none";
};
var _OverItem = function(obj){
var arr = document.all(this.ItemID);
if(typeof arr.length != "undefined")
{
for(var i=0;i<arr.length;i++)
{
arr[i].style.color = "#000000";
arr[i].style.background = "#ffffff"
}
}
obj.style.color = "#ffffff";
obj.style.background = "#000066";
this.OverItemObj = obj;
};
var _ClickItem = function(obj){
this.obj.value = obj.innerText;
this.CloseMenu();
};
var _ItemKeyDown = function(ev){
this.LoadMenu();
var arr = document.all(this.ItemID);
var inObj = null;
var en = (typeof arr.length != "undefined")?arr.length:0;
if(this.OverItemObj == null)
{
if(typeof arr.length != "undefined")
{
this.OverItemObj = arr[0];
}
else
{
this.OverItemObj = arr;
}
}
if(ev.keyCode == 40 || ev.keyCode == 39)
{
this.ShowMenu();
if(this.OverItemObj.index == en-1)
{
inObj = this.OverItemObj;
}
else
{
inObj = arr[parseInt(this.OverItemObj.index)+1]
}
this.OverItem(inObj);
inObj.scrollIntoView();
}
if(ev.keyCode == 38 || ev.keyCode == 37)
{
this.ShowMenu();
if(this.OverItemObj.index == 0)
{
inObj = this.OverItemObj;
}
else
{
inObj = arr[parseInt(this.OverItemObj.index)-1]
}
this.OverItem(inObj);
inObj.scrollIntoView();
}
};

解决方案 »

  1.   


    其中 
    var DxjBox = function(pDiv ,DataMethod, _width, _height){----
    DataMethod  是传入一个获取服务器端数据的方法
    可以自己构造注意需要 JSON 型数据
      

  2.   

    给个xajax代码吧,不会JScript,谢了
      

  3.   

    前几天写的!!你好好研究研究
    输入d,dd,ddd,dddd,ddddd都可以联想出数据来!!
    Index.html文件:
    <html>
    <head>
    <script>
    var xmlHttp;
    function createXMLHttpRequest()
    {
        if(window.ActiveXObject)
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            xmlHttp = new XMLHttpRequest();
        }
    }
    function startRequest(data)
    {
        createXMLHttpRequest();
        try
        {
            xmlHttp.onreadystatechange = function(){handleStateChange(data);}
            xmlHttp.open("GET", "data.xml", true);
            xmlHttp.send(null);
        }
        catch(exception)
        {
            alert("xmlHttp Fail");
        }
    }
    function handleStateChange(data)
    {
        if(xmlHttp.readyState == 4)
        {
            if (xmlHttp.status == 200 || xmlHttp.status == 0)
            {
                var root = xmlHttp.responseXML.documentElement;
                try
                {
                    var info = root.getElementsByTagName(data)[0];
                    var text = info.firstChild.nodeValue;
                    var array = text.split("-");
                    var obj = document.getElementById("div1");
                    obj.style.display = "block";
                    obj.innerHTML = "";
                    for(var i=0; i<array.length; i++)
                    {
                        obj.innerHTML = obj.innerHTML + "<span style='display:block' onclick='spanClick()' onmouseover='spanMouseOver()'>" + array[i] + "</span>";
                    }
                }
                catch(exception)
                {
                    var obj = document.getElementById("div1");
                    obj.style.display = "block";
                    obj.innerHTML = "";
                }
            }
        }
    }
    function textChange(data)
    {
        if(data == "")
        {
            var obj = document.getElementById("div1");
            obj.style.display = "block";
            obj.innerHTML = "";
        }
        else
        {
             startRequest(data);
        }
    }
    function spanClick()
    {
        var spanObj=event.srcElement;
        var textObj = document.getElementById("text1");
        textObj.value = spanObj.innerHTML;
        var divObj = document.getElementById("div1");
        divObj.style.display = "none";
        divObj.innerHTML = "";
    }
    var oldSpanObj;
    function spanMouseOver()
    {
        if(oldSpanObj != null)
        {
            oldSpanObj.style.backgroundColor = "#FFFFFF";
        }
        var spanObj=event.srcElement;
        spanObj.style.backgroundColor = "#FF7788";
        oldSpanObj = spanObj;
    }
    </script>
    </head>
    <body>
    <input type="text" id="text1" onpropertychange="textChange(this.value);" />
    <br>
    <div id="div1" style="border:1px solid #8877EE;display:none;position:absolute;width:146;background-color:#EEFFFF">
    </div>
    </body>
    </html>
    注:position:absolute实现div浮动且显示时不占位data.xml文件:
    <?xml version="1.0" encoding="GB2312"?> 
    <root>
        <d>d1</d>
        <dd>dd1-dd2</dd>
        <ddd>ddd1-ddd2-ddd3</ddd>
        <dddd>dddd1-dddd2-dddd3-dddd4</dddd>
        <ddddd>ddddd1-ddddd2-ddddd3-ddddd4-ddddd5</ddddd>
    </root>
      

  4.   

    上面的改一下就好了. 
    if (xmlHttp.status == 200  ¦ ¦ xmlHttp.status == 0) 
    的¦ ¦  改为||xmlHttp.open("GET", "data.xml", true); 
    改为
    var url="http://127.0.0.1/data.xml";
    xmlHttp.open("GET", "data.xml",true);
    我花了一天时间找出来的错误.找出问题后,感觉很冤.
      

  5.   

    var url="http://127.0.0.1/data.xml"; 
    xmlHttp.open("GET", "url",true);