搜索下拉框

当选择下拉框有很多选项时是否觉得很难选择？
若然经过查询筛选出有用的选项是否觉得方便很多？以下代码可能对你用。---[ jscrpit for IE6.0 ]

******js部份，把它存为"findInSelect.js"文件方便调用]******

//===gotCode for findInSelect.js 2006-1-9===
//===搜索下拉框===
document.write('<span id="draw_findInSelect"></span>')

//--建立搜索输入框
function drawInput_findInSelect(){
 oHtml = ''+
   '<div style="position:absolute;top:100;left:100" id="SS_search_Div">'+
    '<div style="'+
     ';position:absolute' +
     ';z-index:2'   +
     ';width:100%'   +
    '">/n' +
     '<input name="SS_search" type="text" style="width:100%" ignore="true" οnkeyup="findInSelect(this.array,this.target);">'+
    '</div>/n'+
    '<div style="'+
     ';position:absolute' +
     ';z-index:1'   +
     ';width:100%'   +
    '">/n' +
     '<iframe  width="100%" height="21" frameborder="1" scrolling="no"></iframe>/n'+
    '</div>/n'+
   '</div>'
 
 document.write(oHtml)
}
drawInput_findInSelect()

//--储存原select中的选项，将其变成数组
var array_findInSelect = new Object()

//--将原来select重构成可查询组件
function create_findInSelect( which ){
 obj  = which.options    //--取得select中的选择项 
 name  = which.name
 
 //--储存原select中的选项
  array_findInSelect['array_'+name] = new Array()
  oArray  = array_findInSelect['array_'+name]
  array  = 'array_findInSelect.array_'+name
  
  for( var i = 0 ; i < obj.length ; i ++ ){
   oArray.push({name:obj[i].text,value:obj[i].value})
  }
 //--end--
 
 oHtml = ''+
   '<input type="button" ignore="true" value="搜索" οnclick="findInSelect('+array+','+name+');">'

 which.outerHTML = which.outerHTML+oHtml
}

 
function findInSelect( array,target){ //--which:输入搜索框,array:下拉选择数组,target:选择后的要放置数值input
 where = draw_findInSelect
 which  = SS_search
 
 txt  = which.value
 opt  = new Array()
 obj  = array
 
 if( txt != "" ){ //--不为空时搜索
  for( var i = 0 ; i < obj.length ; i ++ ){
   if( obj[i].name.indexOf(txt) >= 0 ){
    opt.push('<div value="'+obj[i].value+'" οnmοuseοver="selectFX(this)">'+obj[i].name+'</div>')
   }
  } 
  
 }else{    //--为空时显示全部
  for( var i = 0 ; i < obj.length ; i ++ ){
    opt.push('<div value="'+obj[i].value+'" οnmοuseοver="selectFX(this)">'+obj[i].name+'</div>')
  }
 }
 
 //---取下拉框值
  offset = parseInt(target.currentStyle.borderWidth)
  iTop  = target.getBoundingClientRect().top + target.offsetHeight - offset
  iLeft = target.getBoundingClientRect().left - offset
  iWidth = target.offsetWidth
  iHeight = target.offsetHeight
 //--end---
 
 
 //--关于搜索输入框--
  SS_search_Div.style.display = ''
  SS_search_Div.style.top  = iTop - target.offsetHeight - 1
  SS_search_Div.style.left  = iLeft
  SS_search_Div.style.width  = iWidth
  SS_search_Div.style.height  = iHeight
  SS_search.array  = array
  SS_search.target  = target
 //--end--
 
 
 if( target.form != null ){
  oTarget = target.form.name+"."+target.name
 }else{
  oTarget = target.uniqueID
 }
 
 sHtml = '<div id="SS_select"  onselectstart="return false"'+
   ' style="'+
    ';font:9pt'    +
    ';position:absolute' +
    ';z-index:100'   +
    ';top:'  + iTop  +
    ';left:' + iLeft  +
    ';width:' + iWidth +
    ';cursor:default'  +
   '" οnclick="'+
     ';'+oTarget+'.value=event.srcElement.value' +   //--点击取得值
     ';SS_select.style.display = /'none/''  +   //--自定义下拉框隐藏
     ';SS_search_Div.style.display= /'none/'' +   //--搜索框隐藏
   '">/n' +
    '<div id="SS_option" style="' +
     ';border:1px solid black' +
     ';position:absolute'  +
     ';z-index:2'    +
     ';width:100%'    +
     ';overflow:auto;'   +
    '">/n' +
     '<div value="" style="color:red">共['+opt.length+']项</div>/n' +
     opt.join('') +
    '</div>/n'+
    '<div id="SS_frame" style="'+
     ';position:absolute' +
     ';z-index:1'   +
     ';width:100%'   +
     ';overflow:hidden;'  +
    '">/n' +
     '<iframe  width="100%" height="100%" frameborder="0" scrolling="no"></iframe>/n'+
    '</div>/n'+
   '</div>/n'
   
 where.innerHTML = sHtml 
 
 //--设定下拉框高度--
  if( SS_option.offsetHeight > document.body.offsetHeight ){
   SS_option.style.height = document.body.offsetHeight/2
  }else{
   SS_option.style.height = "auto"
  }
 //--设定下拉框后的iframe高度
   SS_frame.style.height = SS_option.offsetHeight
 //--end--
 
}

//--隐藏自定义下拉框
function findInSelect_hide(){
 if( event && document.all("SS_option")!=null ){
  if( event.srcElement == SS_option || event.srcElement.parentNode == SS_option || event.srcElement.ignore == "true" ){
   return
  }else{
   SS_select.style.display = 'none'
   SS_search_Div.style.display = 'none'
  }
 }
}

//--选择效果
var lastOver_findInSelect = null
function selectFX( which ){
 obj = lastOver_findInSelect
 if( obj != null && which != obj ){
  obj.style.cssText="color:windowtext;background:white;"
 }
 which.style.cssText="color:highlighttext;background:highlight;"
 lastOver_findInSelect = which
}

******html部份******
<script language="jscript" src="findInSelect.js"></script>
<script >
function selectOnload(){
    create_findInSelect(form1.aaa)
}
</script>
<body onLoad="selectOnload()" οnmοusedοwn="findInSelect_hide()">
    <form name="form1">
        <select name="aaa">
            <option value="Windows/.NET">Windows/.NET</option>
            <option value="C/C++">C/C++</option>
            <option value="Java">Java</option>
            <option value="Web开发(脚本和动态语言)">Web开发(脚本和动态语言)</option>
            <option value="Linux/Unix/BSD">Linux/Unix/BSD</option>
            <option value="数据库开发应用">数据库开发应用</option>
            <option value="游戏开发">游戏开发</option>
            <option value="移动开发">移动开发</option>
            <option value="汇编">汇编</option>
            <option value="软工与管理">软工与管理</option>
        </select>
    <form>
</body>