jQuery实现input框(文本框)支持手动选择

需求要让jQuery做系统实现input框可选择，现在记录一下实现过程：

js部分：

// 文本框支持选择
		/* 转化字典值
		  @param data
		  @param inputId 供选择的文本框ID 
		  @param dataSource 选择的文本框值数据,为数组
		  例：[
		          {
		              title: ""，//可为空，每个选择块的title
		              children: [ 
		                {
		                    title: "", //可为空，为空选择框展示值为value，不为空选择框展示值为 title：value
		                    value: ""  //实际需赋值给input框的值
		                },
		              ]
		          },
		      ]
		*/	
		(function ($) {
		    $.inputSelect = function (options) {
		        var defaults = {
		            inputId: '',
		            dataSource: []
		        };
		        var options = $.extend(defaults, options);

		        if (!options.inputId || options.dataSource.length == 0) {
		            return false;
		        }

		        var inputDom = $("#" + options.inputId);

		        var inputValue = $("#" + options.inputId).val(); //选中的val
		        console.log(inputValue)
		        var divOuterWidth = parseInt(inputDom.outerWidth()) + 2; //div的宽度

		        inputDom.wrap('<div id="' + options.inputId + 'SelectSearchDiv" class="' + options.inputId + 'SelectSearchDiv inputSelectDiv" style="width:' + divOuterWidth + 'px"></div>');
		        inputDom.addClass("inputSelect");
		        var ulOuterWidth = parseInt(inputDom.outerWidth()) - 2;
		        var ulHtml = '<ul class="' + options.inputId + 'SearchUl selectSearchUl" style="width:' + ulOuterWidth + 'px"></ul>';
		        inputDom.after(ulHtml);

		        $("#" + options.inputId).focus(function () {
		            defaultSelect();
		        });

		        $("#" + options.inputId).keyup(function () {
		            inputValue = $(this).val();
		        });

		        $(document).click(function (event) {
		            var event = event || window.event;
		            var target = event.target || event.srcElement;
		            var _con = $("#" + options.inputId);   // 设置目标区域
		            if (!_con.is(event.target) && _con.has(event.target).length === 0) {
		                $("div." + options.inputId + "SelectSearchDiv").removeClass("hover");
		            }
		        });

		        $(document).on("click", "#" + options.inputId + "SelectSearchDiv ul li.selectLi", function () {
		            inputValue = $(this).data("value");
		            $(this).addClass("active");
		            $("#" + options.inputId).val(inputValue);
		            $("div." + options.inputId + "SelectSearchDiv").removeClass("hover");
		        });

		        function defaultSelect() {
		            $("div." + options.inputId + "SelectSearchDiv").addClass("hover");

		            var li = '';
		            for (var i = 0; i < options.dataSource.length; i++) {
		                if (options.dataSource[i].title) {
		                    li += '<li class="titleLi">' + options.dataSource[i].title + '</li>';
		                }
		                for (var y = 0; y < options.dataSource[i].children.length; y++) {
		                    if (options.dataSource[i].children[y].title) {
		                        if (inputValue == options.dataSource[i].children[y].value) {
		                            li += '<li class="selectLi active" data-value = ' + options.dataSource[i].children[y].value + '>' + options.dataSource[i].children[y].title + "：" + options.dataSource[i].children[y].value + '</li>';
		                        } else {
		                            li += '<li class="selectLi" data-value = ' + options.dataSource[i].children[y].value + '>' + options.dataSource[i].children[y].title + "：" + options.dataSource[i].children[y].value + '</li>';
		                        }
		                    } else {
		                        if (inputValue == options.dataSource[i].children[y].value) {
		                            li += '<li class="selectLi active" data-value = ' + options.dataSource[i].children[y].value + '>' + options.dataSource[i].children[y].value + '</li>';
		                        } else {
		                            li += '<li class="selectLi" data-value = ' + options.dataSource[i].children[y].value + '>' + options.dataSource[i].children[y].value + '</li>';
		                        }
		                    }
		                }
		            }
		            $("ul." + options.inputId + "SearchUl").html(li);
		        }
		    }
		})(jQuery);

 

css部分：

/* inputSelect */
		div.inputSelectDiv {
		    width: 220px;
			position: relative;
		}
		div.inputSelectDiv .inputSelect {
			width: 300px;
			height: 22px;
			line-height: 18px;
			margin: 0;
			border: 1px solid #DBDFE6;
		    cursor: pointer;
		}
		div.inputSelectDiv ul{
			display: none;
			width: 218px;
			max-height: 200px;
			padding: 0;
			margin: 0;
			position: absolute;
			top: 24px;
			left: 0;
			border: 1px solid #DBDFE6;
			overflow: auto;
		    background-color: #fff;
		    border-top: 0;
		    scrollbar-arrow-color: #a2a2a2;
		    scrollbar-face-color: #c1c1c1;
		    scrollbar-shadow-color: #f1f1f1;
		    scrollbar-track-color: #f1f1f1;
		}
		div.inputSelectDiv ul li {
			list-style: none;
			line-height: 30px;
			padding: 0 10px;
		}
		div.inputSelectDiv ul li.selectLi {
		    cursor: pointer;
		}
		div.inputSelectDiv ul li.active {
			background-color: #5FB878;
			color: #fff;
		}
		div.inputSelectDiv ul li.selectLi:hover {
			background-color: #bbb;
		}
		div.inputSelectDiv.hover ul {
			display: block;
		}

调用方法：把input框ID传入，然后文本框支持的选项需要

var contractOptions = [
			{
			  title: "选择标题一",//可为空，每个选择块的title
			  children: [ 
			    {
			        title: "标题一下子选择项1", //可为空，为空选择框展示值为value，不为空选择框展示值为 title：value
			        value: "1-1"  //实际需赋值给input框的值
			    },
			    {
			        title: "标题一下子选择项2", //可为空，为空选择框展示值为value，不为空选择框展示值为 title：value
			        value: "1-2"  //实际需赋值给input框的值
			    },
			    {
			        title: "标题一下子选择项3", //可为空，为空选择框展示值为value，不为空选择框展示值为 title：value
			        value: "1-3"  //实际需赋值给input框的值
			    },
			  ]
			},
			{
			  title: "选择标题二",
			  children: [ 
			    {
			        title: "标题二下子选择项1", 
			        value: "2-1" 
			    },
			    {
			        title: "标题二下子选择项2", 
			        value: "2-2"  
			    },
			  ]
			},
		]

		// 加文本框支持选择方法
		$.inputSelect({
		    inputId: "inputSelect",
		    dataSource: contractOptions
		});