/**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();
}
};
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();
}
};
其中
var DxjBox = function(pDiv ,DataMethod, _width, _height){----
DataMethod 是传入一个获取服务器端数据的方法
可以自己构造注意需要 JSON 型数据
输入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>
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);
我花了一天时间找出来的错误.找出问题后,感觉很冤.
xmlHttp.open("GET", "url",true);