jQuery插件下拉列表

下拉列表选择功能经常会用到，这里就把它封装了，方便以后项目上直接用或参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
*{padding:0;margin:0;}
ul,li{list-style:none;}
body{margin:100px;}
.theHore{
    position: relative;
}
.search{
    width:200px;
    height:20px;
    line-height:20px;
    padding:0 2px;
    border:1px solid #999;
}
.list{
    border:1px solid #ddd;
    width:204px;
    position: absolute;
    top:22px;
    left:0;
    max-height:100px;
    overflow-y:scroll;
    display: none;
}
.list li{
    font-size:14px;
    height:25px;
    line-height:25px;
    padding:0 5px;
}
.list .current{
    background-color:#ddd;
}
</style>
</head>
<body>


<div class="theHore">
    <input type="text" class="search">
    <input type="hidden" class="hidden">
    <ul class="list">
        <li t="0">11我11</li>
        <li t="1">我11</li>
        <li t="2">22你22</li>
        <li t="3">你22</li>
        <li t="4">33我33</li>
        <li t="5">我33</li>
        <li t="6">44你44</li>
        <li t="7">你44</li>
    </ul>
</div>


<script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
<script>

    //下拉选择插件
    ;(function ($) {
        $.fn.theHorse = function ( opt ) 
        {
            var def = {
                text : '.search' , //搜索框
                hidden : '.hidden' , //隐藏域
                list : '.list' //数据列表
             }
            opt = $.extend( def , opt );
            this.each(function(){

                var THAT = $(this) , 
                    TEXT = THAT.find( opt.text ) ,
                    LIST = THAT.find( opt.list ) ,
                    HIDDEM = THAT.find( opt.hidden ) ,
                    LI = LIST.find('li') ,
                    liLength = LI.length ,
                    cIndex = - 1 ; //聚焦起始为 -1//开始的时候要全部添加 s 属性


                LI.attr('s','s');

                //操作属性
                var operateAttr = function( that , boole ){
                    var _thisVal = that.val() ,
                        liHideNum = 0 ;
                        for( var i = 0 , len = LI.length ; i < len ; i++ ){
                            if ( LI.eq(i).html().indexOf( _thisVal ) != -1 ){
                                LI.eq(i).show().attr('s','s').removeAttr('h');
                            }else{
                                LI.eq(i).hide().attr('h','h').removeAttr('s').removeClass('current');
                                liHideNum++;
                            }
                        }

                    if ( boole ) {
                        if ( liLength == liHideNum ){
                            LIST.hide();
                        }else{
                            LIST.show();
                        }    
                    }
                }


                //文本触发函数
                var text = {
                    //聚焦
                    focus : function()
                    {
                        LIST.show();
                        operateAttr( $(this) , 0 );
                    } ,
                    //按下
                    keyup : function( ev )
                    {
                        if ( ev.keyCode != 38 && ev.keyCode != 40 )
                        {
                            operateAttr( $(this) , 1 );
                            //清除之前的记录
                            cIndex = -1 ;
                            LI.removeClass('current');
                        }else
                        {
                            //上下键选择 , 只有 s 属性的 li才能被选择
                            var sLi = LIST.find('li[s=s]') ,
                                sLiLen = sLi.length ;
                            if ( ev.keyCode == 38 ){
                                if ( cIndex > 0 ){
                                    cIndex -- ;
                                }else if( cIndex == -1 ){
                                    cIndex = -1 ;
                                }
                            }else 
                            if(ev.keyCode == 40 ){
                                if ( cIndex < sLiLen -1 ){
                                    cIndex ++ ;
                                }else if( cIndex == sLiLen -1 ){
                                    cIndex = sLiLen -1 ;
                                }
                            }

                            sLi.eq( cIndex ).addClass('current').siblings('li[s=s]').removeClass('current');
                            TEXT.val( sLi.eq( cIndex ).html() );
                            HIDDEM.val( sLi.eq( cIndex ).attr('t') );
                        }


                        //当回车的时候
                        if( ev.keyCode == 13 ){
                            LIST.hide();
                        }

                    } ,
                    //失焦
                    blur : function()
                    {
                        var timer = setTimeout(function(){
                            LIST.hide();
                            clearTimeout( timer );
                        },200);
                    }
                }

                //当文本被触发的相关方法
                TEXT.on('focus',text.focus)
                    .on('keyup',text.keyup)
                    .on('blur',text.blur) ;

                //当下拉框被操作的时候
                LIST.find('li[s=s]').on('click' , function(){
                    TEXT.val( $(this).html() );
                    HIDDEM.val( $(this).attr('t') );
                }).on('mouseover',function(){
                    $(this).addClass('current').siblings('li').removeClass('current');
                    TEXT.val( $(this).html() );
                    HIDDEM.val( $(this).attr('t') );
                    //要跟聚焦的索引同步
                    for( var i = 0 , len = LIST.find('li[s=s]').length ; i < len ; i++ ){
                        if ( LIST.find('li[s=s]').eq(i).hasClass('current') ) {
                            cIndex = i ;
                        }
                    }
                });

            });
            return this ;
        }
    })(jQuery);

    //调用
    $('.theHore').theHorse();

</script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zion0707/p/5210228.html