文本框智能下拉功能

所属医院: <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="150px" name='hidname' class="yysearch"  value="<?php 
                       foreach ($doctor as $item) {
                              if ($item['id'] == $query['hospitalID']) {  
                                  echo $item['hospitalName']; 
                              }   
                           } 
                              ?>"/>
<div  style="margin-left:75px;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>
原文地址:https://www.cnblogs.com/jthb/p/4288810.html