码迷,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
迷上了代码!