原来在某个网站发现过一个很好用的可编辑下拉,这两天因为需要使用再次的去找那个.却怎么也找不到了,在一番baidu,google终于还是没有找到.但是无心插柳,发现了一个更加不错的,所以贴出来.同时为了保持下拉不被影响,可以将原来的输入提示下拉去掉,代码为autocomplete="off"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<title>可编辑下拉</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,"\\"")+'"; 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,"\\"")+'"; 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="A|B|C|D" size="40" name="q"><br>
网址：<input type="text" autolist="A|B">
<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>
posted on 2007-07-16 10:09
Dong 阅读(399)
评论(0) 编辑 收藏