div模仿select效果二：带搜索框

项目需要，要做一个首字母快速定位的select，代码如下：

HTML

<div class="select_country" unselectable="on" style="-moz-user-select:none;" onselectstart="return false;"> 
   <div class="cy_title">
    <span class="cy_name">English</span>
    <i></i>
   </div>
    <div class="cy_wrap" style="display:none;">
        <div class="letter_search">
            <i></i>
            <input class="q_txt" type="text" name="quick_find" placeholder="Quick Find">
        </div>
        <ul class="cy_list"> 
         <li class="cy_active"><a href="javascript:void(0);">English</a></li> 
         <li><a href="javascript:void(0);">French</a></li> 
         <li><a href="javascript:void(0);">German</a></li> 
         <li><a href="javascript:void(0);">Swedish</a></li> 
         <li><a href="javascript:void(0);">Esperanto</a></li> 
         <li><a href="javascript:void(0);">Arabic</a></li> 
         <li><a href="javascript:void(0);">Myanmar (Burmese)</a></li> 
        </ul>
    </div> 
</div>

CSS

.select_country{width:350px; margin-left:60px; position: relative; z-index: 10;}
.select_country .cy_title{ position: relative; width:320px; height: 14px; line-height: 14px; padding: 8px 20px 8px 10px; border: 1px solid #ddd; cursor: pointer;}
.select_country .cy_title i{ position: absolute; top: 12px; right: 10px; width:0; height: 0; border-width: 5px 5px 0; border-style: solid; border-color: #333 transparent transparent transparent;}
.select_country .cy_wrap{ position: absolute; top: 31px; left: 0; width:350px; line-height: 24px; border: 1px solid #ddd; background: #fff;}
.select_country .cy_wrap .cy_list{ width:350px; height: 168px; overflow-y:scroll; line-height: 24px;}
.select_country .cy_wrap .cy_list li{ padding: 0 5px;}
.select_country .cy_wrap .cy_list li a{ display: block; padding-left: 5px; line-height: 24px; text-decoration: none;}
.select_country .cy_wrap .cy_list li a:hover,
.select_country .cy_wrap .cy_list li.cy_active a{ color: #fff; background: #6189f2;}
.select_country .cy_wrap .letter_search{ margin: 6px; padding: 2px; overflow: hidden; border: 1px solid #ccc; border-radius: 4px;}
.select_country .cy_wrap .letter_search i{ display: block; float: left; width: 24px; height: 24px; background: url(../images/search-24.png) no-repeat;}
.select_country .cy_wrap .letter_search input.q_txt{ float: left; width: 300px; padding-left: 5px; height: 24px; line-height: 24px; border:none;}

JQ

$('.cy_title').click(function(){
                if ($('.cy_wrap').is(':visible')){
                    $('.cy_wrap').hide(function(){
                        $('html').unbind('click');
                    });  
                } else {
                    $('.cy_wrap').show(10,function(){
                        $('html').bind('click', function(){
                            if($('.q_txt').is(':focus')){
                                return false;
                            }else{
                                $('.cy_wrap').hide();
                                $('html').unbind('click');
                            }
                        })
                    });
                }
            });
                $('.cy_list li').click(function(){
                    $('.cy_name').html($(this).text());
                    $(this).addClass('cy_active').siblings().removeClass('cy_active');
                    $('.cy_wrap').toggle();
                });

 

转载于:https://www.cnblogs.com/3box/p/4755091.html