input触发弹出层，实现select 效果

最新推荐文章于 2022-04-07 16:05:00 发布

quant.nxl

最新推荐文章于 2022-04-07 16:05:00 发布

阅读量3.2w

点赞数 2

本文链接：https://blog.youkuaiyun.com/cherishme1988/article/details/42741051

版权

在Html中，<input>标签标示一个文本输入框，没有结束标签。<select>标签就是弹出下拉框，两个标签是相互独立的，如果把两者结合在一起，那可能会成为一个新的亮点，增加用户体验。其实已经有很多比较成熟的效果，比如google的自动补全效果，在用户输入部分关键字之后，会弹出相应的下拉选项，这样都大大提高了用户的体验效果。刚好这周，客户提出要调整输入框效果，实现input和select相结合。在组件中，这样的东西并不存在，那么就需要去自己设计一个，思路大致就是单击input时,触发click事件，显示弹出层内容，类似select效果，同时在改变input里面文本内容时，对弹出层中显示内容进行调整，这里用到了onpropertychange事件。Onpropertychange时间，可以实时监听input文本域中内容变化。

同时还需要用到<li>元素的onmouseover, onmouseout等其他相关事件。第一步，首先观察下目前互联网一些大佬们的处理方式，投资较多的网站12306，我们最亲爱的12306，我去，此处省略1000字，，，，

12306的页面UI效果还算可以，打开页面源码可以看到它引入了自己定义好的一些样式，

具体的调用事件我们肯定是看不到的，大致事件也差不多就是onclick, Onpropertychange等事件，即使封转再好，本质还是一个input标签，除了W3C哪天把它事件给取消了，哈哈，开个玩笑。其实，看下我们最爱去的网站，也是一个自动补全的功能，利用ajax异步刷新技术。

细心的会发现还有一个语音录入的功能，像淘宝，天猫这些大型电子商务网站，真的把用户体验做的很不错，赞一个。其他的就不举例了，太多了…接下来就开始着手设计自己的效果吧……上个效果图先，

安安静静的躺在那里，是不是有点select标签的意思，现在去叫醒这个熊孩子，单击input显示弹出层，弹出层中内容是采用ajax提交后台获取的数据，

采用jsp实现挺简单的，平时开发一般用到的是都是表单，跟jsp一样，不过只在外面嵌了一个ifram,为了实现复用，就写了个单独的JSP，以后碰到类似的需要，只需要从页面上获取ID(需要该效果的ID),配置下ajax提交的数据，就可以轻松搞定，是不是很开心加愉快。程序员最怕的就是copy,copy,copy!哪我们跟复印机没啥区别了，你说呢…

实现代码如下：

<%@ page contentType="text/html;charset=utf-8"%>
<head> 
<title>标题页</title> 
<script type="text/css">
</script>
</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
        <td>div:</td>
        <td style="position:relative;"> 
        <input type="text" id="txtRegion"  style="width:220px; background-color:#fff;"/> 
         <div id="divList" style="display: none; position: absolute ; left:228px; top:0px; border: 1px solid black; overflow: hidden; height: 150px; position: absolute; background-color:#FFFFFF; "> 
                <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
                    <tr> 
                        <td> 
                               <div id="contentDiv"  style="overflow: auto; padding-left:0; width: 100%; height: 150px; background-color: #FFFFFF; "></div> 
                        </td> 
                    </tr> 
                </table>   
          </div> 
        </td> 
    </tr>  
 </table> 
<script type="text/javascript">
       var oRegion = document.getElementById("txtRegion");     //需要弹出下拉列表的文本框 
       var oDivList = document.getElementById("divList");         //要弹出的下拉列表
       var contentD = document.getElementById("contentDiv") ;
       //var oClose = document.getElementById("tdClose");   //关闭div的单元格，也可使用按钮实现 
       var QueryCode ="COPY_aibsm.enums.sm.receive.support_row" ;
       var bNoAdjusted = true; 
       var html = "" ; 
       var all_html ="" ;
       var colOptions = "" ;
       $(document).ready(function(){
              oRegion.style.background="url(/bomc3/jx/boms/busBackup/select2.jpg)  right -3px no-repeat";
              oRegion.style.backgroundColor="#fff" ;
              getJsonListFromCode(QueryCode,function(data){
                      if(data!=null&&data!=""){           // 存在查询结果 ;
                           $.each(data,function(i,e){
                                   all_html +="<li style='text-align:left; padding-left:5px;'>"+e.VALUE+"</li>" ;
                           }) ;
                     }
              },'') ;
       }) ;
       $(document).click(function (e) {          
          var target_id = $(e.target).attr('id') ;             // 获取点击dom元素id ;
          if(target_id!=oRegion.id)
          {
                  oDivList.style.display = "none";　　//隐藏div，实现关闭下拉框的效果 ;
                 oRegion.style.background="url(/bomc3/jx/boms/busBackup/select2.jpg)  right -3px no-repeat";
                  oRegion.style.backgroundColor="#fff" ;
          }
       }) ;
       //设置下列选择项的一些事件 
       function setEvent(colOptions){
              for (var i=0; i<colOptions.length; i++) 
              { 
                  colOptions[i].onclick = function()　　　//为列表项添加单击事件 
                  { 
                      oRegion.value = this.innerText;     //显示选择的文本；
                      oRegion.style.backgroundColor="#219DEF" ;
                      oDivList.style.display = "none";  
                  }; 
                  colOptions[i].onmouseover = function()　//为列表项添加鼠标移动事件 
                  { 
                      this.style.backgroundColor = "#219DEF"; 
                  }; 
                  colOptions[i].onmouseout = function()  //为列表项添加鼠标移走事件 
                  { 
                      this.style.backgroundColor = ""; 
                  }; 
              } 
       }
       //文本获得焦点时的事件 
       oRegion.onfocus = function() 
       { 
           oRegion.style.background="url(/bomc3/jx/boms/busBackup/select.jpg)  right -3px no-repeat";
           oRegion.style.backgroundColor="#fff" ;
           oDivList.style.display = "block";
           if (bNoAdjusted)　　//控制div是否已经显示的变量 
           { 
               bNoAdjusted = false; 
               //设置下拉列表的宽度和位置 
               oDivList.style.width = this.offsetWidth - 4; 
               oDivList.style.posTop = oRegion.offsetTop + oRegion.offsetHeight + 1;          // 设定高度
               oDivList.style.posLeft = oRegion.offsetLeft +1 ;               // 设定与左边的位置;
           } 
       }; 
      
       // 文本内容改变时监听事件 ;
       oRegion.onpropertychange = function(){
               contentD.innerHTML ="" ; // 情况div中所有li元素;
               html ="" ;
               InitializeDIV( oRegion.value) ;
       }
       function InitializeDIV(value){
              var sql ="" ;
              if(value!=""){
                     html+= "<ul><li style='text-align:left; padding-left:3px;'>按"+'"'+"<font style='color :red;'>"+value+"</font>"+'"'+"检索:</li>";
                     sql += 'value='+value ;
              }else{
                html+= "<ul><li style='text-align:left; padding-left:3px;'>请输入检索条件:"+"</li>";
                     sql ="" ;
              }
              getJsonListFromCodeSync(QueryCode,function(data){
                      if(data!=null&&data!=""){           // 存在查询结果 ;
                           $.each(data,function(i,e){
                                   html+="<li style='text-align:left; padding-left:3px;'>"+e.VALUE+"</li>" ;
                           }) ;
                      }else{         // 没有查询结果;
                                  html ="" ;
                                  html+= "<ul><li style='text-align:left; padding-left:3px;'>无法匹配:"+'"'+"<font style='color :red;'>"+value+"</font>"+'"'+"</li>";
                                  html += all_html ;
                      }
                      html+="</ul>" ;
              },sql) ;
              contentD.innerHTML = html ;
              colOptions = $("#contentDiv li") ; //所有列表元素
              setEvent(colOptions) ;
       }
</script>
</body>

因行业要求，UI效果不需要实现互联网那么好的视觉效果，重点是满足用户使用需要，哈哈。小弟上传了，与大家分享，同时也希望大神提出修改意见。

帮助别人，快乐自己------我的格言也希望大家多多帮助我哈！

共享地址：http://download.youkuaiyun.com/detail/cherishme1988/8364579