论坛首页 → 入门技术论坛 →

利用javascript实现仿google文本框的问题

浏览 3972 次
锁定老帖子 主题：利用javascript实现仿google文本框的问题
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • yuca2008
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 50
  • 来自: 深圳
   发表时间：2008-12-15  
我想仿效google文本框的功能，并在此基础上增加了嵌套选择框，实现效果如附图，但是为什么当我选择自定义输入文字后当光标离开文本框时不会出现附图3那样由原来的文本框变为选择框，代码如下：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文本框下拉提示</title><head>
<script language="javascript">
var
sel = "sel",
custom = "custom",
sDefault = "自定义";

var $ = {

// 显示自定义input
forInput : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);

var iSel = oSel.options.selectedIndex;
var vSel = oSel[iSel].value;

if (vSel == sDefault) {
oSel.style.display = "none";
oCus.style.display = "";
oCus.focus();
}
},

// 显示带有自定义文本选项的select
forSel : function() {
var oSel = document.getElementById(sel);
var oCus = document.getElementById(custom);

oSel.style.display = "";
oCus.style.display = "none";

if (oCus.value.length == 0) {
return false;
}

for (var i = 0; i < oSel.length; i++) {
if (oSel[i].value == oCus.value) {
oSel[i].selected = true;
return false;
}
}

oSel.removeChild(oSel.lastChild); // 清除自定义选项

// 添加input的选项
var cSel = document.createElement("option");
cSel.value = oCus.value;
cSel.innerHTML = oCus.value;
cSel.selected = true;
oSel.appendChild(cSel);

// 补上自定义选项，确保该选项在末尾
cSel = document.createElement("option");
cSel.value = sDefault;
cSel.innerHTML = sDefault;
oSel.appendChild(cSel);
}

};

var intIndex=0;arrList = new Array();
arrList[intIndex++] = "GD001001";
arrList[intIndex++] = "GD001002";
arrList[intIndex++] = "GD001003";
arrList[intIndex++] = "GD001004";
arrList[intIndex++] = "GD001005";
arrList[intIndex++] = "GD001006";
arrList[intIndex++] = "GD001007";
arrList[intIndex++] = "GD001008";
arrList[intIndex++] = "GD001009";
arrList[intIndex++] = "GD0010010";
arrList[intIndex++] = "ABCDEFG";

function test() {
init();
smanPromptList(arrList,"inputer");
}
function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
arrList.sort( function(a, b) {
if(a.length>b.length)return 1;
else if(a.length==b.length)return a.localeCompare(b);
else return -1;
}
);
}

function smanPromptList(arrList,objInputId){
         var objouter=document.getElementById("__smanDisp") //显示的DIV对象
         var objInput = document.getElementById(objInputId); //文本框对象
         var selectedIndex=-1;
         var intTmp; //循环用的:)

         if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
             //文本框失去焦点
             objInput.onblur=function(){
                 objouter.style.display='none';
             }
            
             //文本框按键抬起
             objInput.onkeyup=checkKeyCode;
             //文本框得到焦点
             objInput.onfocus=checkAndShow;
          
             function checkKeyCode(evt){
               evt = evt || window.event;
                 var ie = (document.all)? true:false
                 if (ie){
                     var keyCode=evt.keyCode
                     if (keyCode==40||keyCode==38){ //下上
                         var isUp=false
                         if(keyCode==40) isUp=true ;
                         chageSelection(isUp)
                     }else if (keyCode==13){//回车
                         outSelection(selectedIndex);
                     }else{
                         checkAndShow(evt)
                     }
                 }else{
                     checkAndShow(evt)
                 }
                 divPosition(evt)
             }

//高亮显示
function checkAndShow(){
   var strInput = objInput.value
   if (strInput!=""){
   divPosition();
   selectedIndex=-1;
   objouter.innerHTML ="";
   for (intTmp=0;intTmp<arrList.length;intTmp++){
   for(i=0;i<arrList[intTmp].length;i++){
if (arrList[intTmp].substr(i, strInput.length).toUpperCase()==strInput.toUpperCase()){
     addOption(arrList[intTmp],strInput);
   }
}
   }
   objouter.style.display='';
   }else{
   objouter.style.display='none';
}
function addOption(value,keyw){
var v=value.replace(keyw,"<b><font color=red>"+keyw+"</font></b>");
   objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + v + "</div>"
}
}
//
             function chageSelection(isUp){
                 if (objouter.style.display=='none'){
                     objouter.style.display='';
                 }else{
                     if (isUp)
                         selectedIndex++
                     else
                         selectedIndex--
                 }
                 var maxIndex = objouter.children.length-1;
                 if (selectedIndex<0){selectedIndex=0}
                 if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
                 for (intTmp=0;intTmp<=maxIndex;intTmp++){

                     if (intTmp==selectedIndex){
                         objouter.children[intTmp].className="sman_selectedStyle";
                     }else{
                         objouter.children[intTmp].className="";
                     }
                 }
             }
             function outSelection(Index){
                 objInput.value = objouter.children[Index].innerText;
                 objouter.style.display='none';
             }
             function divPosition(evt){
                 var left = 0;
              var top   = 0;   
     var e = objInput;
              while (e.offsetParent){
               left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
              top   += e.offsetTop   + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
             e      = e.offsetParent;
             }

            left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
            top   += e.offsetTop   + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

                 objouter.style.top     = (top   + objInput.clientHeight) + 'px' ;
                 objouter.style.left     = left + 'px' ;
                 objouter.style.width= objInput.clientWidth;
             }
     }
     document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");
     document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");
     function getAbsoluteHeight(ob){
         return ob.offsetHeight
     }
     function getAbsoluteWidth(ob){
         return ob.offsetWidth
     }
     function getAbsoluteLeft(ob){
         var mendingLeft = ob .offsetLeft;
         while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
             mendingLeft += ob .offsetParent.offsetLeft;
             mendingOb = ob.offsetParent;
         }
         return mendingLeft ;
     }
     function getAbsoluteTop(ob){
         var mendingTop = ob.offsetTop;
         while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
             mendingTop += ob .offsetParent.offsetTop;
             ob = ob .offsetParent;
         }
         return mendingTop ;
     }
Number.prototype.NaN0 = function()
{
     return isNaN(this)?0:this;
}
</script>
</head>
<body onLoad="test()">
<table width="100%" border="0" align="center">
   <tr>
     <td><table width="100%" border="0" align="center">
       <tr>
         <td align="center" valign="middle"><font color="#0000FF">&nbsp;</font></td>
       </tr>
     </table>
         <div align="center"><font size="2">输入&quot;G&quot;试试效果吧!</font>
         </div>
         <table border="1" align="center" cellspacing="1" bordercolor="#CCCCCC"   id="table1" style="BORDER-COLLAPSE: collapse">
           <tr bgcolor="#99CCFF">
             <td bgcolor="#CCCCCC"><font class="text">1</font></td>
             <td bgcolor="#FFFFFF">
<select name="sel" style="width:160px;" onchange="$.forInput()">
            <option value="选项一">选项一</option>
            <option value="选项二">选项二</option>
           <option value="自定义">自定义</option>
          </select>
          <input type="text" name="custom" id="inputer" size="10" maxlength="10" style="display:none;width:160px;" onblur="$.forSel()"/>
</td>
           </tr>
         </table>
       <br /></td>
   </tr>
</table>

</body></html>
  • 大小: 8.1 KB
  • 大小: 6 KB
  • 大小: 4.8 KB
返回顶楼
         
  • minzaipiao
  • 等级: 一星会员
  • 性别:
  • 文章: 42
  • 积分: 160
  • 来自: 杭州
   发表时间：2008-12-16  
你实现这个功能，代码量也太大了，

不防试试jquery
返回顶楼
          回帖地址
0 请登录后投票
  • yuca2008
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 50
  • 来自: 深圳
   发表时间：2008-12-16  
minzaipiao 写道

你实现这个功能，代码量也太大了， 不防试试jquery

请问你有例子吗？请给点意见，谢谢！
返回顶楼
          回帖地址
0 请登录后投票
  • xin163
  • 等级: 初级会员
  • 性别:
  • 文章: 3
  • 积分: 30
  • 来自: 长春
   发表时间：2008-12-17  
晕还有jquery，晕了，直接用js就能写出来
返回顶楼
          回帖地址
0 请登录后投票
  • yuca2008
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 50
  • 来自: 深圳
   发表时间：2008-12-19  
除了用Extjs外还有什么方法吗？
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics