码迷,mamicode.com
首页 > 其他好文 > 详细

文本框智能下拉功能

时间:2015-02-12 19:58:06      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

所属医院: <input type="hidden" name="hid" id="hid" value=""  />
<style>
.tsdoctor ul li:hover,
.tsdoctor ul li.high{  background-color:#CCC;}
</style>
<input type="Text" style="width:150px" name=hidname class="yysearch"  value="<?php 
                       foreach ($doctor as $item) {
                              if ($item[id] == $query[hospitalID]) {  
                                  echo $item[hospitalName]; 
                              }   
                           } 
                              ?>"/>
<div  style="margin-left:75px;width:154px;border:#000 groove 1px;display:none;height:300px;overflow-y:scroll;" class="tsdoctor"  >
    <ul id=tsul >
     </ul>
</div>
<script>
    var iNow = 0;
    $(.yysearch).bind(keyup focus, function() {
        $(.tsdoctor).show();
        var a= $(this).val();
        a = a.replace(/^\s+|\s+$/g, "");  //去除左右空格
        $.ajax({
           type: "GET",
           url: "/admin/doctor/searchHospitalByKey",
           data: "key="+a,
           success: function(msg){
                 var shizhi = (msg.length)/60; //60为一个单元
              shizhi = shizhi * 50;
              if(shizhi < 30) {  $(".tsdoctor").hide()  }
              if(shizhi > 300){ shizhi = 300; }
              $(.tsdoctor).css({ height: shizhi});
              $(#tsul).html(msg);
           }
        });
    });

    $(.tsdoctor ul li).bind(click, function() {
        var a= $(this).html();
        $(".yysearch").val(a);
        $(.tsdoctor).hide();
    });

    function getShoper(id,name){
        $(#hid).val(id);
        $(".yysearch").val(name);
        $(.tsdoctor).hide();
    }

    document.onkeydown=jumpPage;
    function jumpPage() { 
        if (event.keyCode==38)//
         fun_b();
      
        if (event.keyCode==40)//
        fun_d();
        
        if(event.keyCode==13){//回车
           //获取当前选中的值
           var hight = $(.high).html();  
           $(.yysearch).val(hight);   
        }
     } 

    function fun_b(){ 
        iNow--; 
        toggleClass();
    }

    function fun_d(){
        iNow++; 
        toggleClass();
    } 
    
    function toggleClass(){
        if(iNow > $(.tsdoctor ul li).length - 1){
            iNow = 0;
        }else if(iNow < 0){
            iNow = $(.tsdoctor ul li).length - 1;
        }
        $(.tsdoctor ul li).removeClass(high);
        $(.tsdoctor ul li).eq(iNow).addClass(high);
    }

</script>

 

文本框智能下拉功能

标签:

原文地址:http://www.cnblogs.com/jthb/p/4288810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!