动态自动提示框

 

<! 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" >
< head >
< 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  type ="text/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 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 >
< input  type ="text"  name ="keyword"  id ="keyword"  size ="30"  value ="" />

< div  id ="DivList"  class ="promptlist"  style ="display:none;"  align ="left" >   </ div >
< script > ...
var list = new PromptList("ShowList.asp", "keyword", "DivList", 200, false, 500);
</ script >
</ body >
</ html >