动态自动提示框

最新推荐文章于 2024-09-11 09:13:53 发布

cloudgamer

最新推荐文章于 2024-09-11 09:13:53 发布

阅读量907

点赞数

CC 4.0 BY-SA版权

分类专栏：程序文章标签： function xmlhttprequest div null class html

本文链接：https://blog.youkuaiyun.com/cloudgamer/article/details/1758869

程序专栏收录该内容

11 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>动态自动提示框</title>

<!--

.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>

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 ajaxGet(sURL, sValue, fnHandler){

var xmlhttp;

try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }

catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }

catch (e) { try { xmlhttp = new XMLHttpRequest(); }

catch (e) { return null; }}}

try {

xmlhttp.onreadystatechange = function(){

if (xmlhttp.readyState == 4 && xmlhttp.status == 200)

fnHandler(xmlhttp.responseText);

};

xmlhttp.open("GET", sURL+"?keyword="+sValue+"&"+Math.random(), true);

xmlhttp.send("");

} catch(z) { return null; }

}

//检测关键字

function CheckKey(sValue){

var rValue = sValue;

rValue = rValue.replace(/[^a-zA-Z0-9 一-龥]/ig, " ");

rValue = rValue.replace(/s+/g, " ");

rValue = rValue.replace(/^s*|s*$/g, "");

return rValue || "";

}

//排序函数

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 = {

//数据来源，文本框id，div层id，显示的最大高度，空串是否显示，显示间隔

initialize: function(sUrl, idText, idDiv, iHeight, bEmptyShow, iTime) {

var oList = this, oText = document.getElementById(idText), oDiv = document.getElementById(idDiv);

//公有

this.Time = parseInt(iTime) || 500; //显示间隔

this.Height = parseInt(iHeight) || 300; //显示的最大高度,设定一个默认最大高度

this.EmptyShow = bEmptyShow === true; //空串是否显示

this.Url = sUrl; //查找数据的网址

//私有

this.oText = oText; this.oDiv = oDiv;

this.iIndex = -1;

this.iScroll = 0; //用于控制滚动条

this.rList = new Array(); //存放结果

this.bHide = true; //判断是否隐藏

this.bSelected = false; //判断是否选择选项

this.bShow = false; //判断是否显示选项

this.eTimer = null; //用来设置查询间隔

oText.autocomplete = "off"; //为了不让系统的自动提示框遮住

oText.onkeydown = function(e){ oList.Keydown.call(oList, e) };

oText.onfocus = function(){ oList.Show.call(oList) };

//oText.onkeyup = function(e){ oList.Keyup.call(oList, e) };

if (document.all) {

oText.onpropertychange = function(){ if (oList.bShow) oList.Show.call(oList); oList.bShow = true; }

} else {

oText.onkeyup = function(e){ this.value = this.value; };

oText.watch("value", function(eventObj, oldval, newval){ if (oList.bShow) oList.Show.call(oList); oList.bShow = true; return newval; });

}

//点了滚动条的话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(e){ oList.CheckHide.call(oList, e) });

//判断鼠标是否在选项内点击

CheckClick: function(){

if (this.bSelected) this.Output(); this.bSelected = false;

//判断鼠标是否在div内点击不是就隐藏Div

CheckHide: function(e){

if (this.bHide && Event(e).target!=this.oText) this.Hide(); this.bHide = true;

//隐藏Div

Hide: function(){

this.oDiv.style.display = 'none';

//检查Div

CheckDiv: function(){

if (0 < this.oDiv.childNodes.length) { return true; } else { this.Hide(); return false;}

//输出

Output: function(){

this.Hide(); this.bShow = false; if (this.iIndex >= 0) this.oText.value = this.rList[this.iIndex];

//显示选项

Show: function(){

var sValue = CheckKey(this.oText.value);

if(!sValue && !this.EmptyShow) return false;

var oList = this, seachTimer = this.eTimer;

//设置查询间隔,

if (!!seachTimer) window.clearTimeout(seachTimer);

this.eTimer = window.setTimeout( function() {

ajaxGet(oList.Url, sValue, function(aValue){ oList.funShow.call(oList, aValue, sValue); });

seachTimer = null;

}, this.Time );

//显示函数,还没有整理

funShow: function(aValue, sValue){

var oList = this, oLay = this.oText, oDiv = this.oDiv

this.Hide(); this.iIndex = -1; oDiv.innerHTML = ""; this.rList.length = 0;

try {

if (!aValue) { return false };

var aList = eval("["+aValue+"]").sort(SetSort), rValue, oNewDiv, rArray = sValue.split(" ");

//插入项目

for (var i = 0, len = aList.length; i < len; i++) {

rValue = aList[i], oNewDiv = document.createElement("div");

this.rList.push(rValue); oNewDiv.index = i;//添加一个属性存放索引

addEvent(oNewDiv, "mouseup", function(){ oList.bSelected = true; });

addEvent(oNewDiv, "mouseover", function(e){ oList.mouseSelected.call(oList, e) });

oNewDiv.style.width = "100%"; oNewDiv.style.paddingLeft = "3px";

for (elm in rArray)

{ rValue = rValue.replace(new RegExp(rArray[elm], "gi"), "<b>$&</b>"); }

oNewDiv.innerHTML = rValue;

oDiv.appendChild(oNewDiv);

}

//显示设置

if (this.CheckDiv()) {

var iLeft = oLay.offsetLeft, iTop = oLay.offsetHeight + oLay.offsetTop, iHeight = this.Height, iWidth = oLay.offsetWidth;

oDiv.style.height = "";

while (oLay.offsetParent) { oLay = oLay.offsetParent; iLeft += oLay.offsetLeft; iTop += oLay.offsetTop; }

with (oDiv.style) { top = iTop+"px"; left = iLeft+"px"; width = this.oText.offsetWidth+"px"; display = ''; }

if (iHeight < oDiv.offsetHeight) {

this.iScroll = oDiv.offsetHeight; oDiv.style.height = iHeight+"px";

} else { this.iScroll = 0; }

}

} catch(e) { this.Hide(); }

//高亮选项

ShowSelect: function(newIndex){

if (this.iIndex >= 0) this.oDiv.childNodes[this.iIndex].className = "";

this.oDiv.childNodes[newIndex].className = "selectedStyle";

this.iIndex = newIndex;

//鼠标移动

mouseSelected: function(e){

var oSelected = Event(e).target;

if (oSelected.tagName != "DIV") oSelected = oSelected.parentNode;

var nIndex = oSelected.index;

if (this.iIndex != nIndex) this.ShowSelect(nIndex);

//检查按键

Keyup: function(e){

var keyCode = Event(e).keyCode;

if (keyCode != 40 && keyCode != 38 && keyCode != 13) this.Show();

//检查按键

Keydown: function(e){

if (this.CheckDiv()) {

var keyCode = Event(e).keyCode, oDiv = this.oDiv;

if (keyCode == 40 || keyCode == 38){ //下上

var mIndex = oDiv.childNodes.length - 1, newIndex = this.iIndex, iScroll = this.iScroll;

if (oDiv.style.display == 'none'){

var iTime = this.Time;//为了不要延世

this.Time = 0; this.Show(); this.Time = iTime; newIndex = 0;

}else{

if (keyCode == 40) { if (newIndex == mIndex) return; newIndex++; }

else { if (newIndex <= 0) return; newIndex--; }

}

this.ShowSelect(newIndex);

//设置滚动条只需要在按键时设置就可以

if (iScroll) {

var iHeight = this.Height;

if ((iHeight+oDiv.scrollTop)*(1+mIndex) < (1+newIndex)*iScroll ) {

oDiv.scrollTop += iHeight/2;

} else if (oDiv.scrollTop*(1+mIndex) > newIndex*iScroll ) {

oDiv.scrollTop -= iHeight/2;

}

} else if (keyCode == 13 && oDiv.style.display != 'none') { this.Output(); }//回车

}

};

</script>

</head>

<body>

var list = new PromptList("ShowList.asp", "keyword", "DivList", 200, false, 500);

</script>

</body>

</html>