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>