静态自动提示框
2013年10月09日
⁄ 综合
⁄ 共 2991字 ⁄ 字号
小 中 大
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>静态自动提示框</title>
<style type="text/css">...
<!--
.promptlist{...}{
position:absolute;
background:#fff;
border:1px solid #000;
cursor:pointer;
font-size:14px;
color: #444444;
padding:1px 0px 1px 1px;
-moz-user-select:none;
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
white-space:nowrap;
}
.selectedStyle{...}{background-Color:#0066CC; color:#FFF}
-->
</style>
<script language="javascript">...
var Class = ...{
create: function() ...{
return function() ...{
this.initialize.apply(this, arguments);
}
}
}
String.prototype.matchOf = function(sValue)...{
return (this.toUpperCase().indexOf(sValue.toUpperCase()) >= 0);
}
function addEvent(oTarget, sEventType, fnHandler) ...{
if (oTarget.addEventListener) ...{
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) ...{
oTarget.attachEvent("on" + sEventType, fnHandler);
} else ...{
oTarget["on" + sEventType] = fnHandler;
}
}
function Event(e)...{
var oEvent = (document.all) ? window.event : e;
if(document.all)...{
oEvent.target = oEvent.srcElement;
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
}
return oEvent;
}
//排序函数
function SetSort(a, b)...{
if (a.length > b.length) return 1;
else if (a.length == b.length) return a.localeCompare(b);
else return -1;
}
var PromptList = Class.create();
PromptList.prototype = ...{
initialize: function(arrList, idText, idDiv, iHeight, bShow) ...{
var oList = this, oText = document.getElementById(idText), oDiv = document.getElementById(idDiv);
this.iIndex = -1;
this.Height = parseInt(iHeight) || 300; //显示的最大高度,设定一个默认最大高度
this.EmptyShow = bShow === true; //空串是否显示
this.Scroll = 0; //是否有滚动条
this.rList = new Array(); //存放结果
this.bHide = true; //判断是否隐藏
this.bSelected = false; //判断是否选择选项
this.aList = arrList.sort(SetSort); //原来数据
oText.autocomplete = "off"; //为了不让系统的自动提示框遮住
oText.onfocus = function()...{ oList.Show.call(oList) };
oText.onkeyup = function(e)...{ oList.Keyup.call(oList, e) };
oText.onkeydown = function(e)...{ oList.Keydown.call(oList, e) };
//点了滚动条的话onkeyup和onkeydown事件就到了this.oDiv 只能先这样解决
oDiv.onkeyup = function() ...{ oList.oText.onkeyup(); return false };
oDiv.onkeydown = function() ...{ oList.oText.onkeydown(); return false };
oDiv.onselectstart = function() ...{ return false; }; //防止选择
oDiv.onmousedown = function() ...{ oList.bHide = false; }; //
oDiv.onmouseup = function() ...{ oList.CheckClick.call(oList) }; //
addEvent(document, "mousedown", function()...{ oList.CheckHide.call(oList) });
this.oText = oText; this.oDiv = oDiv;
},
//判断鼠标是否在选项内点击
![]()