[HTML]下拉输入框--能输入的select

 闲话:每次作到有默认又可以自定义的表单时,就开始头痛。又是输入框又是下拉框的,先不说用户在用时会不会晕,自己看了都头晕。一直在幻想有没一个象VB里的下拉框一样,又能输入又能选择的。以前从网上找了不少这方面的用js的组合,一堆js代码是一定了,但是使用麻烦,效果不怎么样,而且还很消耗客户端的资源。两天前在google处看到一个很cool的能输入下拉框组合。曾想拿过来用,但是Google的js程序员太牛气了,光一个js类洋洋洒洒写了一大篇。想从中抽出需要的代码,那简直是大海里捞针,一激之下,仿了一个,以下是运行原理和原码。

 正文:
  参与插件:
    select(下拉框:默认display:none)×1,text(文本框)×1,主div(层)×1,辅div(层)×n
  原理:
  text.onfocus事件中从select中读取option项以一个option一个div的方式将option项加载到div内,并将div定位到text的下面,并同步div和text的宽度,然后div显示,激活select隐藏函数,将div覆盖到的select的visibility属性全设置为hidden(因为在IE中div是遮不住select的),同时向text加载各种必要的事件,确保能及时的作出反应。
  text.onclick加载与onfocus一样的函数,可以确保用户的重复使用。
  text.onkeyup加载匹配功能,用户在文本框内输入资料时自动匹配相符合的option项。
  text.onblur判断操作真的结束后(m_intTextSelectIn=true)将div.display设置为none使div隐藏,并激活select显示函数,将一开始被隐藏的select显示出来。

  主div.onmouseout将m_intTextSelectIn设置为false锁定结束标识,并将焦点赋给text,避免鼠标未作选择,但已经离开了文本框和主div。
  主div.onmouseover将m_intTextSelectIn设置为true释放被锁定的结束标识

  辅div.onmouseover修改当前div的背景,表示鼠标正处于该div上方。
  辅div.onclick将m_intTextSelectIn设置为true释放被锁定的结束标识,并将outerText赋值给text.value。最后将焦点赋给text,然后再blur将焦点弹开(本操作在Firefox里提示出错,但不影响使用),激活text.onblur事件。

  以上即时这个下拉输入框的工作基本原理。还有一些小细节,如主div超出限定长度后会出现下拉框,主div的命名之类的。还有特别注明一下代码里的getPosition、HideOverSels、Obj1OverObj2均出至51js版主宝玉大侠之手,特此鸣谢。^^
  以下是作好的js代码,给有需要的朋友:

/*---------------------------------textselect.js--------------------------------------------------*/

var m_strTextselectDiv="Textselectshow_Div"
var m_intTextSelectIn=false
var ie=(document.getElementById && document.all);

for(var IDx=0,IDy='';document.getElementById(m_strTextselectDiv)!=null;IDx++,IDy=IDx){
 m_strTextselectDiv=(document.getElementById(m_strTextselectDiv + IDy)==null)?m_strTextselectDiv + IDy:m_strTextselectDiv
}
document.write ('<div id="' + m_strTextselectDiv + '" style="position: absolute;cursor: default;border: 1px solid #B2B2B2;background-color: #fff;display: none;"></div>')
// 获取对象的坐标
function getPosition(Obj)
{
 try{
  for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft,Obj=Obj.offsetParent);
  return {left:sumLeft,top:sumTop}
 }catch(e){}
}
//处理Div中的选项/* 某个选项,输入框的ID号 */
function divOnmoveover(obj,objText)
{
 var MM_objText=document.getElementById(objText)

 var objChilddiv=obj.parentNode.getElementsByTagName("div")
 for(var x=0;x<objChilddiv.length;x++){objChilddiv[x].style.cssText=''}
 obj.style.cssText='background-color: #330066;color: #ffffff;'

 obj.οnclick=function(){
  m_intTextSelectIn=false
  if(ie)
  {MM_objText.value=obj.outerText}
  else
  {MM_objText.value=obj.textContent}
  MM_objText.focus()
  MM_objText.blur()
 }
}

function showSelect(obj,A_seleObj)
{
 var ie=(document.getElementById && document.all);
 var objDiv =document.getElementById(m_strTextselectDiv)
 var seleObj =document.getElementById(A_seleObj)
 
 //循环取名,避免取了个重复的ID号
 for(var IDx=0,IDy='';obj.id=='';IDx++,IDy=IDx){
  obj.id=(document.getElementById("textSelect" + IDy)==null)?"textSelect" + IDy:''
 }
 objDiv.style.left=getPosition(obj).left
 objDiv.style.top=getPosition(obj).top+obj.offsetHeight
 objDiv.style.width=obj.offsetWidth
 objDiv.style.height='';
 objDiv.style.overflowY='';
 objDiv.innerHTML=''
 //读取select的项目放到Div里。
 for(var x=0;x<seleObj.options.length;x++)
 {objDiv.innerHTML+="<div οnmοuseοver=/"divOnmoveover(this,'" + obj.id + "')/" style='width:100%;white-space: nowrap;cursor: default;'>"+seleObj.options[x].text+"</div>"}
 //调整Div高度,过度显示滚动条
 if(x>8)
 {
  objDiv.style.height=100;
  objDiv.style.overflowY='auto';
 }
 objDiv.style.display=''
 if(ie){HideOverSels(objDiv.id)}
 objDiv.οnmοuseοver=function(){m_intTextSelectIn=true}
 objDiv.οnmοuseοut=function(){m_intTextSelectIn=false;obj.focus();}
 
 obj.οnclick=function(){showSelect(obj,A_seleObj);obj.onkeyup();}
 //自动匹配选项中符合条件的记录
 obj.οnkeyup=function(){
  if(obj.value==''){return false}
  var objChilddiv=objDiv.getElementsByTagName("div")
  for(var x=0;x<objChilddiv.length;x++)
  {objChilddiv[x].style.cssText=''}
  for(var x=0;x<objChilddiv.length;x++)
  {
   var strChilddiv=(ie)?objChilddiv[x].outerText:obj.textContent
   if(strChilddiv.substr(0,obj.value.length)==obj.value)
   {
    objDiv.scrollTop=objChilddiv[x].offsetHeight*x
    objChilddiv[x].style.cssText='background-color: #330066;color: #ffffff;'
    return true
   }
  }
 }
 obj.οnblur=function(){if(!m_intTextSelectIn){objDiv.style.display='none'};if(ie){HideOverSels(objDiv.id)}}
}

// 隐藏被ID为objID的对象(层)遮挡的所有select
function HideOverSels(objID)
{
  var sels = document.getElementsByTagName('select');
  for (var i = 0; i < sels.length; i++)
  if (Obj1OverObj2(document.getElementById(objID), sels[i]))
 sels[i].style.visibility = 'hidden';
    else
    sels[i].style.visibility = 'visible';
}

//判断obj1是否遮挡了obj2
function Obj1OverObj2(obj1, obj2)
{
var pos1 = getPosition(obj1)
var pos2 = getPosition(obj2)
var result = true;
var obj1Left = pos1.left - window.document.body.scrollLeft;
var obj1Top = pos1.top - window.document.body.scrollTop;
var obj1Right = obj1Left + obj1.offsetWidth;
var obj1Bottom = obj1Top + obj1.offsetHeight;
var obj2Left = pos2.left - window.document.body.scrollLeft;
var obj2Top = pos2.top - window.document.body.scrollTop;
var obj2Right = obj2Left + obj2.offsetWidth;
var obj2Bottom = obj2Top + obj2.offsetHeight;

if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
  obj1Left >= obj2Right || obj1Top >= obj2Bottom)
  result = false;
return result;
}

/*---------------------------------textselect.js--------------------------------------------------*/

以下是使用例子。太晚了,不想写太多了,直接看例子。

<!---------------------------------textselect.htm-------------------------------------------------->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 下拉输入框整理 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script language="javascript" type="text/javascript" src="textselect.js"></script>
<body style="font-size:12px">
<input type="text" name="" size="10" οnfοcus="javascript:showSelect(this,'select1')"><select name="select1" id="select1" style="display: none" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<input type="text" name="" id="a" οnfοcus="javascript:showSelect(this,'select2')"><select name="select2" id="select2" style="display: none" disabled>
<option value="a">a</option>
<option value="b">b</option>
</select><br/>
<select id="hidden">
<option value="i">i</option>
<option value="j">j</option>
</select>
</body>
</html>
<!---------------------------------textselect.htm-------------------------------------------------->

本程序在window 2000、IE6及Firefox1.01下测试通过。

闲话:由于写时一脑子激动,有点忘形之意,所以代码有点繁琐,大家有能力的话最好是优化一下后再使用。当然直接使用也不会怎么。另外欢迎各位有手机的朋友到我的“海鱼手机加瓦站(http://wwww.fishjava.com)”来转转,有不少的免费的手机游戏和图片提供给各位,不但可以在线试玩游戏,直接通过WAP下载游戏和图片,还能自己上传一些好玩的游戏或图片上来大家一起来玩。

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值