下拉列表选择功能经常会用到，这里就把它封装了，方便以后项目上直接用或参考
<!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>