自动提示框


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<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;
}
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.aList = arrList.sort(this.SetSort); //原来数据
oText.autocomplete = "off"; //为了不让系统的自动提示框遮住
oText.onfocus = function(){ PromptList.prototype.Show.call(oList) };
oText.onkeyup = function(e){ PromptList.prototype.Keyup.call(oList, e) };
oText.onkeydown = function(e){ PromptList.prototype.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 }; //防止选择
addEvent(document, "mousedown", function(e){ PromptList.prototype.CheckHide.call(oList, e) });
this.oText = oText; this.oDiv = oDiv;
  },
  //判断鼠标是否在div内点击 不是就隐藏Div
  CheckHide: function(e){
var oTarget = Event(e).target;
if(oTarget!=this.oText && oTarget!=this.oDiv && oTarget.parentNode!=this.oDiv && oTarget.parentNode.parentNode!=this.oDiv) this.Hide();
//这里该怎么办
  },
  //隐藏Div
  Hide: function(){
this.oDiv.style.display = 'none';
//应该在这里移除mousedown事件,同时在显示时添加
  },
  //排序函数
  SetSort: function(a, b){
if (a.length > b.length) return 1;
else if (a.length == b.length) return a.localeCompare(b);
else return -1;
  },
  //检查Div
  CheckDiv: function(){
if (0 < this.oDiv.childNodes.length) { return true; } else { this.Hide(); return false;}
  },
  //检查对象
  CheckSelected: function(e){
var oSelected = Event(e).target;
if (oSelected.tagName != "DIV") oSelected = oSelected.parentNode;
return oSelected;
  },
  //输出
  Output: function(){
this.Hide();
if (this.iIndex >= 0) this.oText.value = this.rList[this.iIndex];
  },
  //显示选项
  Show: function(){
this.SetSelect();
if (this.CheckDiv()) { 
var oLay = this.oText, oList = this.oDiv, iLeft = oLay.offsetLeft, iTop = oLay.offsetHeight + oLay.offsetTop, iHeight = this.Height, iWidth = oLay.offsetWidth;
oList.style.height = "";
while (oLay.offsetParent) { oLay = oLay.offsetParent; iLeft += oLay.offsetLeft; iTop += oLay.offsetTop; }
with (oList.style) { top = iTop; left = iLeft; width = this.oText.offsetWidth; display = ''; }
//用于设置滚动条
if (iHeight < oList.offsetHeight) { this.Scroll = oList.offsetHeight; oList.style.height = iHeight+"px"; } else this.Scroll = 0;
}//每次都重设位置因为用户可能会改变浏览器大小
  },
  //高亮选项
  ShowSelect: function(newIndex){
if (this.iIndex >= 0) this.oDiv.childNodes[this.iIndex].className = "";
this.oDiv.childNodes[newIndex].className = "selectedStyle";
this.iIndex = newIndex;
  }, 
  //设置选项
  SetSelect: function(){
var sValue = this.oText.value;
this.iIndex = -1;
this.oDiv.innerHTML = "";
this.rList.length = 0;
if (sValue || this.EmptyShow){
for (var i = 0, n=0, len = this.aList.length; i < len; i++)
if(this.aList[i].matchOf(sValue)) this.Add(n++, i, sValue);
}
  }, 
  //插入选项
  Add: function(n, i, sValue){
var oList = this, rValue = this.aList[i], oNewDiv = document.createElement("div");
this.rList.push(rValue); oNewDiv.index = n;//添加一个属性存放索引
addEvent(oNewDiv, "mouseup", function(e){ PromptList.prototype.mouseShow.call(oList, e) });
addEvent(oNewDiv, "mouseover", function(e){ PromptList.prototype.mouseSelected.call(oList, e) });
oNewDiv.style.width = "100%"; oNewDiv.style.paddingLeft = "3px";
oNewDiv.innerHTML = rValue.replace(new RegExp(sValue, "gi"), "<b>$&</b>");
this.oDiv.appendChild(oNewDiv);
  },
  //鼠标移动
  mouseSelected: function(e){
var oSelected = this.CheckSelected(e);
if (oSelected){
var nIndex = oSelected.index;
if (this.iIndex != nIndex) this.ShowSelect(nIndex);
}
  },
  //鼠标选择
  mouseShow: function(e){
if (this.CheckSelected(e)) this.Output();
  },
  //检查按键
  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;
if (keyCode == 40 || keyCode == 38){ //下上
var oList = this.oDiv, mIndex = oList.childNodes.length - 1, newIndex = this.iIndex, iScroll = this.Scroll;
if (oList.style.display == 'none'){
oList.style.display = ''; 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+oList.scrollTop)*(1+mIndex) < (1+newIndex)*iScroll ) {
oList.scrollTop += iHeight/2;
} else if (oList.scrollTop*(1+mIndex) > newIndex*iScroll ) {
oList.scrollTop -= iHeight/2;
}
}
}else if (keyCode == 13) { this.Output(); this.SetSelect(); }//回车
}
  }
};
//加上dtd的话ff定位还是出错，未解决
</script>
<style type="text/css">
<!--
.promptlist{
position:absolute;
background:#fff;
border:1px solid #000;
cursor:pointer;
font-size:14px;
padding:1px 4px 1px 4px;
-moz-user-select:none;
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
white-space:nowrap;
}
.selectedStyle{background-Color:#0066CC; color:#FFF}
-->
</style></head>
<body>
<div id="DivList" class="promptlist" style="display:none"> </div>
<table align="center" width="200" border="1">
<tr><td>
<input type="text" id="inputer"/>
</td></tr>
</table>
<div id="cc"> </div>
<div id="dd"> </div>
<script>
var arrList = new Array();
var intIndex=0;
arrList[intIndex++] = "1sdfsdf.m";
arrList[intIndex++] = "111sdafs.net";
arrList[intIndex++] = "b22d1df";
arrList[intIndex++] = "c333a1111sa";
arrList[intIndex++] = "1sdfsdf.m";
arrList[intIndex++] = "111sdafs.net";
arrList[intIndex++] = "b22d1df";
arrList[intIndex++] = "c333a1111sa";
arrList[intIndex++] = "1sdfsdf.m";var list = new PromptList(arrList, "inputer", "DivList", 200);
</script>
</body>
</html>

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <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 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 \u4E00-\u9FA5]/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 = {
      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>
      

  2.   

    <style type="text/css">
    <!--
    .promptlist{position:absolute;background:#fff;border:1px solid #000;cursor:pointer;font-size:14px;padding:1px 4px 1px 4px;-moz-user-select:none;overflow:auto;overflow-y:auto;overflow-x:hidden;white-space:nowrap;
    }
    .selectedStyle{background-Color:#0066CC; color:#FFF}
    -->
    </style></head>
    <body>
    <div id="DivList" class="promptlist" style="display:none;"> </div>
    <table align="center" width="200" border="1">
    <tr><td>
    <input type="text" id="inputer"/>
    </td></tr>
    </table>
    <div id="cc"> </div>
    <div id="dd"> </div>
    <script>
    var list = new PromptList("ShowList.asp", "inputer", "DivList", 200, true, 500);
    </script>
    </body>
    </html>