您的位置:首页 > Web前端 > JavaScript

用JS对下拉菜单进行搜索提示

2005-02-23 13:27 295 查看
看如下的例子:
先加载两个js文件:
<script  language="JavaScript" src="../../js/searchhelp.js"></script>
<script language="JavaScript" src="../../js/searchopen.js"></script>
在在复选框中进行调用:
<select name="i_pbedu" size="1" id="select9" style="width:80" onmouseover="selMouseOver(this)" onmouseout="selMouseOut(this)" onfocus="catch_focus(this)" onkeypress="catch_press(this)" onkeydown="catch_keydown(this)">
  <%=FetchItem.fetchSelectItem("edu","3")%> </select>

searchhelp.js文件为:

//定义 select 原值
var oldValue=""
var oldText="";
var searchtype="1";


//select下拉框的onkeypress事件,定位下拉框的值
function catch_press(sel){


 if(sel.selectedIndex>=0){
  var s=String.fromCharCode(event.keyCode);
  oldValue=oldValue+s;
  oldText=oldText+s;
 
  event.returnValue = false;
  if (!event.returnValue && sel.onchange)
  sel.onchange(sel)
 }
 
 /*if(searchtype=="0")
  searchoptiontext(sel);
 else
  searchoptionvalue(sel);
 selMouseOver();
 */
 
 if(searchoptiontext(sel)){selMouseOver();return true;}
 else {searchoptionvalue(sel);selMouseOver();}
}


//通过text描述定位
function searchoptionvalue(obj){
  if(obj){
   var invalue=oldValue;
   var selectlength=obj.options.length
   for(var i=0;i<selectlength;i++){
    var temp=obj.options[i].value
     if(temp==invalue){
     obj.selectedIndex=i
     obj.focus()
     //break;
     return true;
    }  
   }
  }
  return false;
 }
 //通过值value定位
function searchoptiontext(obj){
  if(obj){
   var invalue=oldText;
   var selectlength=obj.options.length
   for(var i=0;i<selectlength;i++){
    var temp=obj.options[i].text
    //alert(temp.indexOf(invalue))
     if(temp.indexOf(invalue)!=-1){
     obj.selectedIndex=i
     obj.focus()
     //break;
     return true;
    }  
   }
  }
  return false;
 }


//select下拉框的onfocus事件,清空保存的值
function catch_focus(sel) {
 oldText ="";
 oldValue ="";
}

//select下拉框的onkeydown事件,修改下拉框的值
function catch_keydown(sel)
{
 switch(event.keyCode)
 {
  case 13: //回车键
   catch_focus(sel)
   event.returnValue = false;
   break;
  case 27: //Esc键
   catch_focus(sel)
   event.returnValue = false;
   break;
  case 8:  //空格健
   var s = "";
   if(searchtype=="1"){
     s=oldText;
     s = s.substr(0,s.length-1);
     oldText=s;
   }else{
     s=oldValue;
     s = s.substr(0,s.length-1);
     oldValue=s;
   } 
   selMouseOver(sel);
   event.returnValue = false;
   break;
 }
 if (!event.returnValue && sel.onchange)
  sel.onchange(sel)
}


function selMouseOver(obj)
{
   var innerText ="<font  style=/"FONT-SIZE: 12px;color:red;line-height: 20px;/" > 提示信息:<br> 你输入了:"+ oldText+"<br><重新选择该列表将清空该值!></font>"
   Composition.document.body.innerHTML = " "+innerText+" "
   document.all.div_hint.style.display = "block";
   document.all.div_hint.style.left = event.clientX + 20;
   document.all.div_hint.style.top = event.clientY+20;
}


/*
function selMouseOver(obj)
{
 with (document.all.div_hint)
 {
  innerText ="提示信息:/r/n 你输入了:"+ oldText+"/r/n <重新选择该列表将清空该值!>";
  //obj.options[obj.selectedIndex].text;
  if (innerText.length > 0)
  {
   innerText = " " + innerText + "  ";
   style.display = "block";
   style.left = event.clientX + 25;
   style.top = event.clientY+25;
  }
 }
}*/


//select 选择框鼠标移开时消失
function selMouseOut(obj)
{
 with (document.all.div_hint)
 {
  style.display = "none"
 }

}

searchopen.js文件为:

function opensearchwin(path)
{
 window.open (path, '', 'height=500, width=600,  top=20, left=100, toolbar=no, menubar=no, scrollbars=yes,resizable=yes,location=no, status=no')
}

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  function javascript path