自定义下拉选框 可搜索

HTML：

<ul value="" class="select ">

     <li class="select-open"><input type="text" class="select-input"></li>

     <li class="select-list">

          <span value="1" class="drp-item">公司1</span>

          <span value="1" class="drp-item">公司2</span>

          <span value="1" class="drp-item">公司3</span>

          <span value="1" class="drp-item">公司4</span>

     </li>

</ul>

<ul class='select'></ul>

CSS：

/*-自定义下拉选框-*/

.select,.select-serch{line-height:24px;background:#fff;border:1px solid #d9d9d9;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#777;}

.select-zindex{position:relative;z-index:1;}

.select li,.select-serch li{padding:0 10px;cursor:pointer;display:none;}

.select li:first-child,.select-serch li:first-child{display:block;}

.select li span,.select-serch li span{display:block;border-bottom:1px dashed #efefef;}

.select-open{background:url(../images/select-ico.png) no-repeat 96% 9px;height:24px; overflow:hidden}

.select-open input{width:90%;height:24px;border:0 none;background:none;color:#777;}

.select-list,.select-serch-list{border-top:1px solid #efefef;max-height:200px; overflow-y:auto;}

.select-list i,.select-serch-list i{font-size:10px;color:#999; float:right;}

JS：

//自定义下拉选框

    $(window).click(function (event) {

        if (className != "select-open" || className != "select-input") {

            $('.select-list').hide();

            $(".select").removeClass('select-zindex');

        }

        var className = event.target.className;

        switch (className) {

            case "select-open":

                //获取父级UL

                var ul = $(event.target.parentNode);

                ul.addClass('select-zindex');

                ul.find("li").eq(1).show();

                break;

            case "select-input":

                //获取父级UL

                var ul = $(event.target.parentNode.parentNode);

                ul.addClass('select-zindex');

                ul.find("li").eq(1).show();

                break;

            case "drp-item":               

                //获取父级UL

                var ul = $(event.target.parentNode).parent();

                //获取父级LI

                var li = $(event.target.parentNode);

                //搜索条件 给当前项父级赋值

                ul.attr('value', event.target.attributes["value"].nodeValue);

                //选择的选项                

                if(ul.find('.select-input').length > 0){

                    ul.find('.select-input').val(event.target.innerHTML);

                }else{

                    li.siblings('li').html(event.target.innerHTML);

                }

                li.hide();

                break;

        }

    });

    //搜索下拉选项

    $('.select-input').live('keyup',function () {

        var ul = $(this).parents('.select');

        var input = ul.find('.select-input');

        var list = ul.find('.select-list');

        ul.addClass('select-zindex');

        list.show();

        var key = input.val().toLowerCase();

        list.find('span').each(function(i){

            var thisEnVal = $(this).attr('en');

            var thisCnVal = $(this).text();

            if(thisEnVal == undefined){

                if (thisCnVal.indexOf(key) > -1) {

                    $(this).show();

                } else {

                    $(this).hide();

                }

            }else{

                thisEnVal = thisEnVal.toLowerCase();

                if (thisEnVal.indexOf(key) > -1 || thisCnVal.indexOf(key) > -1) {

                    $(this).show();

                } else {

                    $(this).hide();

                }

            }

        });

    });

有用  |  无用 取消

猜你喜欢