自定义自动完成 - 51windows.Net

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<title>自定义自动完成-51windows.Net</title>
<head>
<meta name="keywords" content="51windows.Net">
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<style>
.sdiv{font-size:12px;overflow-y:auto;overflow-x:hidden;height:expression(this.parentElement.style.pixelHeight);z-index:101;}
.sdivover{background:highlight;color:highlighttext;width:100%;padding-left:3px;cursor:default;overflow:hidden;hidden;line-height:120%;}
.sdivout {background:#FFFFFF;color:#000000;width:100%;padding-left:3px;cursor:default;overflow:hidden;line-height:120%;}
input{haiwa:expression(this.onkeyup=__ACP);hw:expression(this.ondblclick=__ACP);}
</style>
</head>
<body onclick="divclick()" onkeydown="KeyDown()">
<SCRIPT LANGUAGE="JavaScript">
<!--
var __InputName;
var HighLine = 0
var MenuStrs = ""
var MenuLines = 0
var KeyOnMenu = false
var _AutoObj
var ShowLine = 10
var LineHeight = 15
var SelectValue = "";
var __InputName;
function DivOver(obj){
	if (KeyOnMenu){
		updateHtml(-1);
		KeyOnMenu = false
	}
	obj.className="sdivover";
}

function divclick(obj){
	document.getElementById("__AutocompleteDiv").style.display = "none";
	if (obj){
		selectedvalue = obj.innerText;
		__InputName.value = selectedvalue;
	}
	HighLine = 0
	_Autostr = ""
	SelectValue = ""
}
function __ACP(){
	if (event.keyCode!=13){
		event.cancelBubble=true
		e = this;
		var t=e.offsetTop; 
		var l=e.offsetLeft; 
		var w=e.offsetWidth;
		var h=e.offsetHeight;
		_AutoObj = this
		divID = document.getElementById("__AutocompleteDiv");
		__InputName = this;
		updateHtml(HighLine);
		if (MenuLines>0){
			while(e=e.offsetParent)
			{ 
				t+=e.offsetTop; 
				l+=e.offsetLeft; 
			}
			divID = eval(divID);
			divID.style.top = t+h;
			divID.style.left = l;
			divID.style.width = w;
			divID.style.height = MenuLines * LineHeight>ShowLine*LineHeight?ShowLine*LineHeight:MenuLines * LineHeight;
			divID.style.display = ""
		}
		else{
			divID.style.display = "none"
		}
	}
}
function InsertSort(arr) { //插入排序->直接插入法排序@panliu888
	var temp, j;
	for(var i=1; i<arr.length; i++) {
		if((arr[i]) < (arr[i-1])) {
			temp = arr[i];
			j = i-1;
			do {
				arr[j+1] = arr[j];
				j--;
			}
			while (j>-1 && (temp) < (arr[j]));
			arr[j+1] = temp;
		}//endif
	}
	return arr;
}
function updateHtml(k){
 	listhtml = ""
	var line = 0
	htmlarr = InsertSort(_AutoObj.autolist.split("|"))
	var liststrarr = htmlarr;
	for(i=0;i<liststrarr.length;i++){
		if((liststrarr[i].substr(0,_AutoObj.value.length)==_AutoObj.value)&&(liststrarr[i].length>_AutoObj.value.length)){
			line ++;
			if (k==line){
				SelectValue = liststrarr[i]
				listhtml += '<div class="sdivover" onclick="divclick(this)" onmouseover=DivOver(this);HighLine='+line+';SelectValue="'+liststrarr[i].replace(/\"/ig,"\\&#34")+'"; onmouseout=this.className="sdivout";>'+liststrarr[i]+'</div>';
			}
			else
				listhtml += '<div class="sdivout" onclick="divclick(this)" onmouseover=DivOver(this);HighLine='+line+';;SelectValue="'+liststrarr[i].replace(/\"/ig,"\\&#34")+'"; onmouseout=this.className="sdivout";>'+liststrarr[i]+'</div>';
		}
	}
	MenuLines = line
	document.getElementById("__AutocompleteDivlist").innerHTML = listhtml;
	document.getElementById("__AutocompleteDivlist").scrollTop = (k-ShowLine)>0?(k-ShowLine)*LineHeight:0;
}
function KeyDown(){
	switch ( event.keyCode ){
		case 13 : if(SelectValue.length>0){_AutoObj.value =SelectValue;divclick();}break ;
		case 38 : KeyMove(-1) ;	break ;
		case 40 : KeyMove(1) ;	break ;
	}
}
function KeyMove(n){
	HighLine = HighLine+(n);
	if (parseInt(HighLine)>parseInt(MenuLines)){HighLine = 1;}
	if(parseInt(HighLine)<1){HighLine = MenuLines;}
	KeyOnMenu = true;
	updateHtml(HighLine)
}
//-->
</SCRIPT>
昵称：<input type="text" autolist="51windows|&#34|haiwa|blueidea|hw|google|jimao8|中国|中|海娃|李海华" size="40" name="q"><br>
网址：<input type="text" autolist="http://www.51windows.Net|http://www.blueidea.com|http://www.csdn.Net" size="40" name="q">

<div id="__AutocompleteDiv" style="position: absolute;border: 1 solid #000000;display:none;height:180px;background:#FFFFFF;" onclick="event.cancelBubble=true">
<div class="sdiv" id="__AutocompleteDivlist" onclick="event.cancelBubble=true">
</div>
</div>
</body>
</html>