一个动态检索信息的下拉提示框

<html>

<head>

<title>动态提示的下拉框</title>

<style>

a{color:red;text-decoration:none;font-size:12px}

</style>

</head>

<h2>动态提示的下拉框</h2>

<hr>

<table>

<tr>

</tr>

<tr>

<td>

<option value="51windows">51windows</option>

</select></span>

</td>

</tr>

</form>

</table>

<hr>

var TempArr=[];//存贮option

function Init(){

var SelectObj=document.frm.elements["demo"]

/*先将数据存入数组*/

with(SelectObj)

for(i=0;i<length;i++)TempArr[i]=[options[i].text,options[i].value]

}

function SelectTip(flag){

var TxtObj=document.frm.elements["txt"]

var SelectObj=document.getElementById("demo")

var Arr=[]

with(SelectObj){

var SelectHTML=innerHTML.match(/<[^>]*>/)[0]

for(i=0;i<TempArr.length;i++)

if(TempArr[i][0].indexOf(TxtObj.value)==0||flag)//若找到以txt的内容开头的，添option。若flag为true,对下拉框初始化

Arr[Arr.length]="<option value='"+TempArr[i][1]+"'>"+TempArr[i][0]+"</option>"

innerHTML=SelectHTML+Arr.join()+"</SELECT>"

}

</script>

</body>

var intIndex=0;arrList = new Array();

arrList[intIndex++] = "1sdfsdf.com";

arrList[intIndex++] = "a11sdafs.net";

arrList[intIndex++] = "b22dsafsdf";

arrList[intIndex++] = "c333asdfsadf";

arrList[intIndex++] = "4444dsafasdf";

arrList[intIndex++] = "dddsfddsafdsaf";

arrList[intIndex++] = "121213dsafsdaf";

arrList[intIndex++] = "43213asdfadsf";

arrList[intIndex++] = "dsa3121dasf3";

arrList[intIndex++] = "a213";

arrList[intIndex++] = "323313";

arrList[intIndex++] = "3213";

arrList[intIndex++] = "32213";

arrList[intIndex++] = "dsfsdddd";

arrList[intIndex++] = "ds11dfsfd";

arrList[intIndex++] = "ffdafd";

arrList[intIndex++] = "afdfd";

arrList[intIndex++] = "afd";

arrList[intIndex++] = "baffad";

arrList[intIndex++] = "2fda2fd";

arrList[intIndex++] = "dasd";

function smanPromptList(arrList,objInputId){

this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;"

if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}

window.onload =function() {

arrList.sort(function(a,b){

if(a.length>b.length)return 1;

else if(a.length==b.length)return a.localeCompare(b);

else return -1;

})

var objouter=document.getElementById("__smanDisp") //显示的DIV对象

var objInput = document.getElementById(objInputId); //文本框对象

var selectedIndex=-1;

var intTmp; //循环用的:)

if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}

//文本框失去焦点

objInput.onblur=function(){

objouter.style.display='none';

}

//文本框按键抬起

objInput.onkeyup=checkKeyCode;

//文本框得到焦点

objInput.onfocus=checkAndShow;

function checkKeyCode(){

var ie = (document.all)? true:false

if (ie){

var keyCode=event.keyCode

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

var isUp=false

if(keyCode==40) isUp=true ;

chageSelection(isUp)

}else if (keyCode==13){//回车

outSelection(selectedIndex);

}else{

checkAndShow()

}

}else{

checkAndShow()

}

divPosition()

}

function checkAndShow(){

var strInput = objInput.value

if (strInput!=""){

divPosition();

selectedIndex=-1;

objouter.innerHTML ="";

for (intTmp=0;intTmp<arrList.length;intTmp++){

if (arrList[intTmp].substr(0, strInput.length).toUpperCase()==strInput.toUpperCase()){

addOption(arrList[intTmp]);

}

objouter.style.display='';

}else{

objouter.style.display='none';

}

function addOption(value){

objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>"

}

function chageSelection(isUp){

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

objouter.style.display='';

}else{

if (isUp)

selectedIndex++

else

selectedIndex--

}

var maxIndex = objouter.children.length-1;

if (selectedIndex<0){selectedIndex=0}

if (selectedIndex>maxIndex) {selectedIndex=maxIndex}

for (intTmp=0;intTmp<=maxIndex;intTmp++){

if (intTmp==selectedIndex){

objouter.children[intTmp].className="sman_selectedStyle";

}else{

objouter.children[intTmp].className="";

}

function outSelection(Index){

objInput.value = objouter.children[Index].innerText;

objouter.style.display='none';

}

function divPosition(){

objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);

objouter.style.left =getAbsoluteLeft(objInput);

objouter.style.width=getAbsoluteWidth(objInput)

}

document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onbulr> </div>");

document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");

function getAbsoluteHeight(ob){

return ob.offsetHeight

}

function getAbsoluteWidth(ob){

return ob.offsetWidth

}

function getAbsoluteLeft(ob){

var mendingLeft = ob .offsetLeft;

while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){

mendingLeft += ob .offsetParent.offsetLeft;

mendingOb = ob.offsetParent;

}

return mendingLeft ;

}

function getAbsoluteTop(ob){

var mendingTop = ob.offsetTop;

while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){

mendingTop += ob .offsetParent.offsetTop;

ob = ob .offsetParent;

}

return mendingTop ;

}

smanPromptList(arrList,"inputer")

</script>