给select标签提供搜索功能

JavaScript代码

$(function() {
    var mask = $("<div style='position:absolute;left:0px;height:0px;height:100%;width:100%;z-index:5;top:0' class='alpha'></div>");
    var searchOption = $('<div class="select_search" style="display:none;position:absolute;border:1px solid #5897fb;border-top:none;background-color:white;z-index:6;cursor:pointer;">\
<div style="padding:5px">\
<input type="text" style="width:100%" />\
</div>\
<ul style="height:150px;overflow-x:hidden;margin:0;padding:4px;">\
</ul>\
</div>');
    $("body").append(searchOption);
    $(".searchSelect").each(function() {
        var _this = $(this);
        _this.addClass("alpha0");
        var sx = _this.offset().left;
        var sy = _this.offset().top;
        var sh = _this.outerHeight();
        var sw = _this.outerWidth();

        var selectLi = $('<div class="select_search linear" tabindex="0" style="cursor:pointer;position:absolute;order:1px solid #aaa;" ><div class="selectVal" style="float:left;text-decoration:none;padding-left: 5px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">' + _this.find("option:selected").text() + '</div><span style="float:right;position:absolute;height:100%;width:18px;right:0;float:left;"><b style="position:absolute;top:45%;right:50%" class="arrow core_arrow"></b></span></div>');
        $("body").append(selectLi);
        selectLi.css("height", sh + "px");
        selectLi.css("width", sw + "px");
        selectLi.css("left", sx + "px");
        selectLi.css("top", sy + "px");
        selectLi.css("line-height", sh + "px");
        selectLi.find(".selectVal").css("width", sw - 38 + "px");

        // selectLi.find(".selectVal").disableSelection();
        selectLi.disableSelection();
        searchOption.disableSelection();
        mask.disableSelection();
        selectLi.mousedown(function() {
            var sl = $(this);
            $(this).toggleClass("linear linear_reversal");
            $(".arrow").toggleClass("core_arrow_top");
            searchOption.toggle();
            searchOption.css("left", sx + "px");
            searchOption.css("top", sy + sh + "px");
            searchOption.css("width", sw + "px");
            var ul = searchOption.find("ul");
            ul.empty();
            var liHeightCount = 0;
            _this.find("option").each(function() {
                var op = $(this);
                if (op.is(":selected")) {

                    ul.append("<li class='li_select' style='list-style:none;' val='" + op.attr("value") + "'>" + op.text() + "</li>");
                } else {
                    ul.append("<li style='list-style:none;' val='" + op.attr("value") + "'>" + op.text() + "</li>");
                }
            });
            ul.find("li").each(function() {
                liHeightCount += $(this).height();
                if ($(this).hasClass("li_select")) {
                    return false;
                }
            });

            if (ul.height() < liHeightCount) {
                ul.scrollTop(liHeightCount - ul.height());
            }

            ul.find("li").mouseover(function() {
                $(this).addClass("li_select");
                ul.find("li").not($(this)).removeClass("li_select");
            });
            ul.find("li").click(function() {
                selectLi.find(".selectVal").text($(this).text());
                _this.val($(this).attr("val"));
                searchOption.toggle();
                sl.toggleClass("linear linear_reversal");
                $(".arrow").toggleClass("core_arrow_top");
                mask.remove();
                selectLi.focus();
            });
            $("body").append(mask);
            mask.click(function() {
                searchOption.toggle();
                sl.toggleClass("linear linear_reversal");
                $(".arrow").toggleClass("core_arrow_top");
                mask.remove();
                //selectLi.focus();
            });
            ul.find("li").disableSelection();
            if (searchOption.find("input").val().length > 0) {
                searchOption.find("input").keyup();
            }
        });

    });
    searchOption.find("input").keyup(function() {
        var val = $(this).val();
        var reg = ".*" + val.replace(/(^\s*)|(\s*$)/g, "").replace(/\ +/g, ".*") + ".*";
        var pattern = new RegExp(reg);

        searchOption.find("li").each(function() {
            if (!pattern.test($(this).text())) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });
});
//防止选择问题
(function($) {
    $.fn.disableSelection = function() {
        return this.each(function() {
            if (typeof this.onselectstart != 'undefined') {
                this.onselectstart = function() {
                    return false;
                };
            } else if (typeof this.style.MozUserSelect != 'undefined') {
                this.style.MozUserSelect = 'none';
            } else {
                this.onmousedown = function() {
                    return false;
                };
            }
        });
    };
})(jQuery);

css样式

.select_search.linear{
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
	background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
	background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
	background-image: linear-gradient(to top, #eee 0%, #fff 50%);
	border-radius: 4px;
	-moz-border-radius: 4px;      /* Gecko browsers */
    -webkit-border-radius: 4px;   /* Webkit browsers */
    outline:none;
	border:1px solid #C3C3C3 ;
}
.select_search.linear:focus{
	border:1px solid #5897fb;
}
.select_search.linear_reversal{
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
	background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
	background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
	background-image: linear-gradient(to top, #fff 0%, #eee 50%);
	border-radius: 4px;
	-moz-border-radius: 4px;      /* Gecko browsers */
    -webkit-border-radius: 4px;   /* Webkit browsers */
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border:1px solid #5897fb;
	border-bottom:none;
	outline:none
}
.alpha0{
	filter:alpha(opacity=0);  /* ie 有效*/
	-moz-opacity:0; /* Firefox  有效*/
	opacity: 0; /* 通用，其他浏览器  有效*/
}
.select_search .core_arrow{
	display:inline-block;
	vertical-align:-2px;
	width:0;
	height:0;
	padding:0;
	margin:4 0 0 2px;
	border-top:4px #a9c7dd solid;
	border-bottom:4px transparent dashed;
	border-right:4px transparent dashed;
	border-left:4px transparent dashed;
	overflow:hidden;
}
.select_search .core_arrow_top{
	margin:0 0 4 2px;
	border-top:4px transparent dashed ;
	border-bottom:4px #a9c7dd solid;
	border-right:4px transparent dashed;
	border-left:4px transparent dashed;
}
.select_search .li_select{
	background-color:#3875d7;
	color:#fff;
}
.select_search li{
	list-style:none;
	text-overflow:ellipsis;
	white-space:nowrap;
}

使用<select class="selectSearch" ></select>