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

最新推荐文章于 2020-09-10 18:10:09 发布

Explorerwen

最新推荐文章于 2020-09-10 18:10:09 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JSP技术文章标签： function javascript path

本文链接：https://blog.youkuaiyun.com/Explorerwen/article/details/298615

JSP技术专栏收录该内容

4 篇文章

订阅专栏

看如下的例子:
先加载两个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" οnmοuseοver="selMouseOver(this)" οnmοuseοut="selMouseOut(this)" οnfοcus="catch_focus(this)" οnkeypress="catch_press(this)" οnkeydοwn="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')
}