给select标签提供搜索功能

来源：互联网发布：mac系统照片储存路径编辑：程序博客网时间：2024/06/06 17:01

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>

0 0