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('<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"
});

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