select下拉框支持搜索功能

是用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('
'); var selectAfterHtml = ''; selectAfterHtml += ''; selectAfterHtml += '
    '; 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 += '
  • ' + SearchOptionText + '
  • '; searchNum++; } else if (SearchOptionValue.indexOf(_thisVal) >= 0) { li += '
  • ' + SearchOptionText + '
  • '; searchNum++; } } if (searchNum == 0) { 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 += '
  • ' + optionTexts[i] + '
  • '; } else { li += '
  • ' + optionTexts[i] + '
  • '; } } $("ul." + options.selectId + "SearchUl").html(li); } } })(jQuery);

    调用时,传入下拉框的ID:

    $.searchSelect({
    	selectId : "a"
    });

    有没有大佬提一下意见怎么优化更改。

    你可能感兴趣的:(select下拉框支持搜索功能)