是用jquery写的,所以首先要引入jquery。
以下是css部分:
div.selectSearchDiv {
width: 220px;
position: relative;
}
div.selectSearchDiv .searchSelect {
width: 220px;
height: 30px;
}
div.selectSearchDiv .searchInput {
width: 192px;
height: 24px;
line-height: 24px;
margin: 0;
padding: 2px 18px 2px 8px;
border: 1px solid #555;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
}
div.selectSearchDiv .searchInput::-ms-clear {
display: none;
}
div.selectSearchDiv .searchInput:focus {
outline: none;
}
div.selectSearchDiv ul{
display: none;
width: 218px;
max-height: 200px;
padding: 0;
margin: 0;
position: absolute;
top: 30px;
left: 0;
border: 1px solid #000;
overflow: auto;
background-color: #fff;
z-index: 10;
}
div.selectSearchDiv ul li {
list-style: none;
height: 30px;
line-height: 30px;
padding: 0 10px;
}
div.selectSearchDiv ul li.active {
background-color: #5FB878;
color: #fff;
}
div.selectSearchDiv ul li.searchLi:hover {
background-color: #bbb;
color: #000;
}
div.selectSearchDiv i.SearchSanjiao {
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
cursor: pointer;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #666;
border-top-style: solid;
transition: all .3s;
-webkit-transition: all .3s;
}
div.selectSearchDiv.hover ul {
display: block;
}
div.selectSearchDiv.hover i.SearchSanjiao {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
以下是js部分:
(function ($) {
$.searchSelect = function (options) {
var defaults = {
selectId: ''
};
var options = $.extend(defaults, options);
var selectDom = $("#" + options.selectId);
var optionLength = $("#" + options.selectId + " option").length, // select option 长度
optionValues = [], //存select option所有val
optionTexts = [], //存select option所有text
SearchOptionText = '', //存select option单个text
SearchOptionValue = '', //存select option单个val
selectText = $("#" + options.selectId + " option:selected").text(); //选中的option text
for (var i = 0; i < optionLength; i++) {
var optionValue = $("#" + options.selectId + " option").eq(i).val();
var optionText = $("#" + options.selectId + " option").eq(i).text();
optionValues.push(optionValue);
optionTexts.push(optionText);
}
selectDom.wrap('<div class="' + options.selectId + 'SelectSearchDiv selectSearchDiv"></div>');
var selectAfterHtml = '<input type="text" class="' + options.selectId + 'SearchInput searchInput">';
selectAfterHtml += '<i class="SearchSanjiao"></i>';
selectAfterHtml += '<ul class="' + options.selectId + 'SearchUl selectSearchUl"></ul>';
selectDom.after(selectAfterHtml);
if (selectText != '') {
$("." + options.selectId + "SearchInput").val(selectText);
}
$("." + options.selectId + "SearchInput").focus(function () {
defaultSelect();
});
selectDom.change(function () {
selectText = $("#" + options.selectId + " option:selected").text();
$("." + options.selectId + "SearchInput").val(selectText);
});
$(document).click(function (event) {
var event = event || window.event;
var target = event.target || event.srcElement;
var _con = $("." + options.selectId + "SearchInput"); // 设置目标区域
if (!_con.is(event.target) && _con.has(event.target).length === 0) {
if (selectText == ''){
$("." + options.selectId + "SearchInput").val('');
} else {
$("." + options.selectId + "SearchInput").val(selectText);
}
$("div." + options.selectId + "SelectSearchDiv").removeClass("hover");
}
});
$("." + options.selectId + "SearchInput").keyup(function () {
// 获取input事件的值
var _thisVal = $(this).val();
if (_thisVal == "") {
defaultSelect();
return false;
}
var li = '';
var searchNum = 0;
for (var i = 0; i < optionLength; i++) {
SearchOptionText = optionTexts[i];
SearchOptionValue = optionValues[i];
if (SearchOptionText.indexOf(_thisVal) >= 0) {
li += '<li class="searchLi">' + SearchOptionText + '</li>';
searchNum++;
} else if (SearchOptionValue.indexOf(_thisVal) >= 0) {
li += '<li class="searchLi">' + SearchOptionText + '</li>';
searchNum++;
}
}
if (searchNum == 0) {
li = '<li>未找到</li>';
}
$("ul." + options.selectId + "SearchUl").html(li);
});
$(document).on("click", "ul." + options.selectId + "SearchUl li.searchLi", function () {
selectText = $(this).text();
$(this).addClass("active");
$("." + options.selectId + "SearchInput").val(selectText);
for (var i = 0; i < optionLength; i++) {
SearchOptionText = optionTexts[i];
SearchOptionValue = optionValues[i];
if (selectText == SearchOptionText) {
selectDom.val(SearchOptionValue);
}
}
$("div." + options.selectId + "SelectSearchDiv").removeClass("hover");
});
function defaultSelect() {
var li = '';
$("div." + options.selectId + "SelectSearchDiv").addClass("hover");
for (var i = 0; i < optionLength; i++) {
if (selectText == optionTexts[i]) {
li += '<li class="searchLi active">' + optionTexts[i] + '</li>';
} else {
li += '<li class="searchLi">' + optionTexts[i] + '</li>';
}
}
$("ul." + options.selectId + "SearchUl").html(li);
}
}
})(jQuery);
调用时,传入下拉框的ID:
$.searchSelect({
selectId : "a"
});
有没有大佬提一下意见怎么优化更改。