首页   新闻   小组   威客   人才   下载   博客   代码贴   在线编程   论坛  
注册 | 登录

可输入、自动匹配的下拉框

作者在 2007-07-24 18:31:00 发布以下内容
两个jsp页面，放到tomcat下可直接运行，在网上找到直接传名字的页面，即选种什么传什么，在工作中要求把选中名字的相应ID传过去，所以改成传ID的。
chuanid.jsp
<%@ page contentType="text/html; charset=GBK" %>
<%@ page import="com.mln.frame.db.DBQueryer"%>
<%@ include file="/mlnoa/pages/icdnet/common.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Editable listbox</title>
<style>
/* Common elements */
body{font:small/1.2em arial,helvetica,clean,sans-serif;font:x-small;}
table{font-size:inherit;font:x-small;}

/* Options Templates */
.ac_menu{border:1px solid #3162A6;background-color:#F6F6F6;cursor:default;overflow:hidden;-moz-box-sizing:border-box;
 height:expression((this.scrollHeight>210)?"210px":"auto")}
.ac_menuitem{width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
.ac_menuitem_selected{background-color:#D6DEEC;width:100%;color:#141414;padding:2px;cursor:pointer;cursor:hand;}
/* JK */
.minHeightTextarea{
 height:expression((this.scrollHeight>150)?"150px":(this.scrollHeight+5)+"px");
 overflow : auto;
}
</style>

<script language=javascript>
var tofieldListArray=["深圳","bbb","ccc","ddd"];
var tofieldListArrayid=["1","2","3","4"];
//alert(tofieldListArray);
</script>
 
<script language=javascript>
 var AC_TAB = 9;   // make the selection
 var AC_ENTER = 13;   // make the selection
 var AC_UP_ARROW = 38;    // move the drop down list selection up by one
 var AC_DOWN_ARROW = 40;  // move the drop down list selection down by one
 var theListDiv;
 var theComboxObj;
 onload=OnLoad
 function OnLoad()
 {
     setTimeout("Initialize()", 100);
 }
 function Initialize()
 {
   AddListDivFun(document.all.tofield); 
 }
 
 function AddListDivFun(obj)
 {
  //此变量为字符串数组。格式为["深圳","bbb","ccc","ddd"]
  //obj.id得到textarea的id
  var theListArray=eval(obj.id+"ListArray");
  var theListArrayid=eval(obj.id+"ListArrayid");
  //alert("obj:"+obj);
  //alert("obj.id:"+obj.id);
  //alert("theListArray:"+theListArray);
  var tempStr='<DIV style="position:relative;visibility:hidden">'
    +'<DIV class=ac_menu id="'+obj.id+'ListDiv" style="FONT-SIZE: 0.9em; Z-INDEX: 1; visibility:hidden; POSITION: absolute;OVERFLOW-Y:auto; WIDTH:'+obj.offsetWidth+'; " '
    +'onmouseover="mouseOverListDivFun(event)" onmouseout="mouseOutListDivFun(event);" onmousedown="mouseDownListDivFun(event);">';
 //alert("obj.id:"+obj.id);
 //alert("tempStr:"+tempStr);
 //在接收页面通过textarea的ID得到本div textValue的值
  for(var i=0;i<theListArray.length;i++)
   tempStr+='<DIV class=ac_menuitem  value='+i+' id="'+htmlEncode(theListArrayid[i])+'" textValue="'+htmlEncode(theListArray[i])+'">'+htmlEncode(theListArray[i])+'</DIV>';
  tempStr+="</DIV></DIV>";
  //alert("i:"+i);
  //alert("htmlEncode(theListArray[i]):"+htmlEncode(theListArray[i]));
  //alert("tempStr:"+tempStr);
  obj.insertAdjacentHTML("afterEnd",tempStr);
  theListDiv=eval(obj.id+"ListDiv");
  //当对象获得焦点时触发
  obj.onfocus=AC_OnFocus;
  //在对象失去输入焦点时触发
  obj.onblur=AC_OnBlur;
  obj.onpropertychange=AC_OnPropertyChange;
  obj.onkeydown=AC_OnKeyDown;
  obj.autoComplete="off";
 }
 //当最开始时点机文本框时触发
 function AC_OnFocus(obj)
 {
  if(obj==null) obj=event.srcElement;
  theListDiv=eval(obj.id+"ListDiv");
  theComboxObj=obj;
  theListDiv.style.visibility="visible";
  adjustListDivScroll();
 }
 //在对象失去输入焦点时触发
 function AC_OnBlur(obj)
 {
  if(obj==null) obj=event.srcElement;
  if(theListDiv.contains(document.activeElement)) obj.focus();
  else theListDiv.style.visibility="hidden";
 }
 
 function AC_OnPropertyChange(obj)
 {
 //alert("bb");
  if(theListDiv==null) return ;
  if(obj==null) obj=event.srcElement;
  theListDiv.selectedIndex=-1;
  var theFirstVisibleIndex=-1;
  //当输入的文本域内容改变时得到的值
  var objValue=obj.value;
  //alert("objValue1:"+objValue);
  for(var i=0;i<theListDiv.children.length;i++)
  {
   if(theListDiv.children[i].textValue.indexOf(objValue)==0)
   {
    if(theFirstVisibleIndex==-1) theFirstVisibleIndex=i;
    theListDiv.children[i].className="ac_menuitem";
    theListDiv.children[i].style.display="";
    theListDiv.children[i].innerHTML="<b>"+htmlEncode(objValue)+"</b>"+htmlEncode(theListDiv.children[i].textValue.substr(objValue.length));
 }
   else
    theListDiv.children[i].style.display="none";
   if(theListDiv.selectedIndex==-1 && theListDiv.children[i].textValue==objValue) theListDiv.selectedIndex=i;
  }
  if(theListDiv.selectedIndex==-1 && theFirstVisibleIndex!=-1)
  {
   theListDiv.selectedIndex=theFirstVisibleIndex;
  }
  if(theListDiv.selectedIndex!=-1) theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
  adjustListDivScroll();
 }
 
 function AC_OnKeyDown(obj)
 {
  if(theListDiv==null) return ;
  if(obj==null) obj=event.srcElement;
  var keyCode=event.keyCode;
  if(keyCode==AC_ENTER) keyCode=event.keyCode=AC_TAB;
  if(keyCode==AC_TAB && theListDiv.selectedIndex!=-1)
  {
   obj.value=theListDiv.children[theListDiv.selectedIndex].textValue;
   document.Compose.hiddenid.value=theListDiv.children[theListDiv.selectedIndex].id;
 
   return ;
  }
 
  if(keyCode==AC_UP_ARROW && theListDiv.selectedIndex!=-1)
  {
   for(var i=theListDiv.selectedIndex-1;i>-1;i--)
   {
    if(theListDiv.children[i].style.display!="none")
    {
     theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem";
     theListDiv.selectedIndex=i;
     theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
     adjustListDivScroll();
     break;
    }
   }
  }
 
  if(keyCode==AC_DOWN_ARROW && theListDiv.selectedIndex!=-1)
  {
   for(var i=theListDiv.selectedIndex*1+1;i<theListDiv.children.length;i++)
   {
    if(theListDiv.children[i].style.display!="none")
    {
     theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem";
     theListDiv.selectedIndex=i;
     theListDiv.children[theListDiv.selectedIndex].className="ac_menuitem_selected";
     adjustListDivScroll();
     break;
    }
   }
   return;
  }
 
 }
 
 function htmlEncode(str)
 {
  if(str==null) return "";
  str=str.replace(/</ig,"&lt;")
  str=str.replace(/>/ig,"&gt;");
  str=str.replace(/"/ig,"&quot;");
  return str;
 }
 //当用户将鼠标指针移动到对象内时触发
 function mouseOverListDivFun(event)
 {
  if(event.toElement!=theListDiv) event.toElement.style.backgroundColor="#E6E6E6";
 }
 //当用户将鼠标指针移出对象边界时触发
 function mouseOutListDivFun(event)
 {
  if(event.fromElement!=theListDiv) event.fromElement.style.backgroundColor="";
 }
 //当用户用鼠标按钮单击对象时触发。
 function mouseDownListDivFun(event)
 {
  var selectedStr="";
  if(event.srcElement==theListDiv){
 
   return;}
   else if(event.srcElement.tagName=="B") {selectedStr=event.srcElement.parentElement.textValue;}
 
  else {selectedStr=event.srcElement.textValue;
   document.Compose.hiddenid.value=event.srcElement.id;
 }
  theComboxObj.value=selectedStr;
  theComboxObj.blur();
 }
 function adjustListDivScroll()
 {
  if ( theListDiv==null || theListDiv.selectedIndex==-1 ) return ;
  var i=theListDiv.selectedIndex;
  if((theListDiv.children[i].offsetTop<theListDiv.scrollTop)||(theListDiv.children[i].offsetTop>theListDiv.scrollTop+200))
   theListDiv.scrollTop=theListDiv.children[i].offsetTop-95;
 
 }
 
</script>

</head>
<body >
 

<form name="Compose" id="Compose" method=post action="2.jsp">
  <input type="hidden" name="hiddenid" value="">
  <table cellpadding=4 cellspacing=0 border=0 width="100%">
    <tr>
      <td >Mail To:</td>
      <td style="padding-top:0px;" > <textarea name="To" class="minHeightTextarea" style="width:300" tabindex="1" id="tofield"
rows="1"  title="textarea" cols="20"></textarea> </td>
    </tr>
    <tr>
      <td colspan="2" ><input type="submit" name="Submit" value="Submit"></td>
    </tr>
  </table>
</form>
</body>
</html> 
 
2.jsp
 <%@ page contentType="text/html; charset=GBK" %>
<%@ page import="com.mln.frame.db.DBQueryer"%>
<%@ include file="/mlnoa/pages/icdnet/common.jsp" %>
<html>
<head>
<title>Editable listbox</title>
 <%
  String tofield = "";
 tofield=new String(request.getParameter("hiddenid").getBytes("ISO-8859-1"),"GBK");
 out.print(tofield);
%>
</head>
<body>
 <input type="button" name="button1" value="返回" class="button" onClick="javascript:window.history.back();">
</body>
</html>
技术文章 | 阅读 2681 次
收藏
文章评论，共1条
zl芊芊zl(作者)
2007-08-23 17:57
1
初始化多个：
 function Initialize()
 {
AddListDivFun(document.all.tofield1);  
AddListDivFun(document.all.tofield2); 
AddListDivFun(document.all.tofield3); 
AddListDivFun(document.all.tofield4); 
AddListDivFun(document.all.tofield5); 
 }

改变：
  var theListArray=eval(obj.id+"ListArray");
  var theListArrayid=eval(obj.id+"ListArrayid");
直接赋给其值为：
  var theListArray=eval(tofieldListArray);
  var theListArrayid=eval(tofieldListArrayid);

引用：
    <tr> 
      <td >Mail To:</td>
      <td style="padding-top:0px;" > <input type="text" name="tofield1" class="minHeightTextarea" style="width:100;text-transform:uppercase" onfocus="AddListDivFun(this)"></td>
    </tr>
。。。。。
    <tr> 
      <td >Mail To:</td>
      <td style="padding-top:0px;" > <input type="text" name="tofield5" class="minHeightTextarea" style="width:100;text-transform:uppercase" onfocus="AddListDivFun(this)"></td>
    </tr>

也可以：
    <tr> 
      <td >Mail To:</td>
      <td style="padding-top:0px;" > <input type="text" size=10 maxlength=100 name="tofield1"></td>
    </tr>
。。。。
    <tr> 
      <td >Mail To:</td>
      <td style="padding-top:0px;" > <input type="text" size=10 maxlength=100 name="tofield5"></td>
    </tr>

注意的地方：
页面里面要加入
  <input type="hidden" name="hiddenid" value="">

而且注意：

<form name="Compose" id="Compose" method=post action="2.jsp">

Compose是form的名字，看看和你的名字是不是一样哦，呵呵


[emot]23[/emot]
赞 回复
游客请输入验证码
zl芊芊zl的博客

zl芊芊zl
浏览656867次
文章分类
文章归档
最新评论