A customized combobox with JQuery

body { ???font-size: 14px; ???font-family: "microsoft yahei", Verdana, Arial, sans-serif, "Times New Roman"; ???max-width: 500px; ???margin: 0 auto; ???-webkit-text-size-adjust: none;}.combobox-menu { ???background-color: #fff; ???border: 1px solid #ccc; ???min-height: 100px; ???overflow-y: auto; ???font-size: 0.875rem; ???padding: 0;}.combobox-menu li { ???list-style: none; ???padding: .625em 1em; ???cursor: pointer;}.combobox-menu li.selected { ???background-color: #337ab7; ???color: #fff;}.combobox-menu li.normal:hover { ???background-color: #d9edf7;}.combobox-menu-dropdown { ???position: absolute; ???z-index: 1000; ???-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); ???box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);}.combobox-menu-caret { ???display: inline-block; ???width: 0; ???height: 0; ???margin-left: 2px; ???vertical-align: middle; ???border-top: 4px dashed; ???border-right: 4px solid transparent; ???border-left: 4px solid transparent; ???position: absolute; ???right: 8px; ???top: 50%;}

/* event wrapper */var eventWrapper = function () { ?this.init();};eventWrapper.prototype.init = function () { ?this.events = {};};eventWrapper.prototype.on = function (key, func) { ?if (func instanceof Function) { ???if (!this.events[key]) { ?????this.events[key] = [func]; ???} else { ?????this.events[key].push(func); ???} ???return this; ?}};eventWrapper.prototype.emmit = function (key) { ?if (this.events[key]) { ???var _list = this.events[key]; ???var that = this; ???var args = arguments; ???[].shift.apply(args); ???for (var i = 0, ci; ci = _list[i]; i++) { ?????ci.apply(that, args); ???} ?}};eventWrapper.prototype.remove = function (key) { ?delete this.events[key];};/*********************//* combobox控件 */var comboBox = function (element, options) { ?var def = { ???menuStyle: {maxHeight: 180}, ???readonly: false, ???data: [] ?}; ?this.opts = $.extend(true, def, options); ?var that = this; ?this.event = new eventWrapper(); ?this.source = []; ?this.selected = null; ?this.$source = $(element); ?if (this.opts.readonly) { ???this.$source.attr(‘readonly‘, ‘readonly‘); ?} ?this.$source.on(‘input paste‘, function () { ???that.changeText($(this)); ?}); ?this.$container = $(‘<div style="position:relative;"></div>‘); ?// this.$caret = $(‘<span class="combobox-menu-caret"></span>‘); ?this.$menu = $(‘<ul class="combobox-menu"></ul>‘); ?this.$lis = null; ?this.$menu.on(‘click‘, ‘li‘, function () { ???if (!that.opts.readonly) { ?????that.select($(this).attr(‘data-value‘)); ???} ?}); ?this.init();};comboBox.prototype.init = function () { ?if (this.opts.data && this.opts.data.length > 0) { ???this.$source.after(this.$menu); ???// this.render(this.opts.data); ???this.$menu.css(‘minWidth‘, this.$source.outerWidth()); ???this.$lis = this.$menu.find(‘li‘); ???this.setMenuStyle(); ???var that = this; ???this.$menu.addClass(‘combobox-menu-dropdown‘).hide(); ???this.$source.wrap(that.$container); ???// this.$caret.insertAfter(that.$source); ???if (!this.opts.readonly) { ?????that.$source.on(‘click‘, function () { ???????if ($(this).val().trim().length === 0) return; ???????that.expandMenu(that); ?????}); ?????// 添加关闭下拉列表事件 ?????$(document).click(function (e) { ???????var target = e.target; ???????if (!$(target).is(that.$source) && !$(target).parents().is(that.$menu)) { ?????????that.$menu.hide(); ?????????if (that.getSelected() && that.$source.val().trim().length === 0) { ???????????that.select(that.getSelected().val); ?????????} ???????} ?????}); ???} ?}};comboBox.prototype.render = function (data) { ?for (var i = 0, ci; ci = data[i]; i++) { ???var _item = $(‘<li></li>‘); ???_item.attr(‘data-value‘, ci.val); ???_item.text(ci.txt); ???if (ci.selected) { ?????this.selected = ci; ???} ???this.$menu.append(_item); ?}};comboBox.prototype.update = function (data) { ?this.$menu.empty(); ?if (data) { ???this.render(data); ?}};comboBox.prototype.expandMenu = function () { ?if (this.$menu.is(‘:hidden‘)) { ???this.$menu.show(); ?}};comboBox.prototype.setMenuStyle = function () { ?if (this.opts.menuStyle) { ???this.$menu.css(this.opts.menuStyle); ?}};comboBox.prototype.select = function (val) { ?if (!val) return; ?var item = _.find(this.opts.data, {val: val}); ?if (item) { ???this.selected = item; ???this.update([this.selected]); ???this.$source.val(item.txt); ???this.$source.attr(‘data-value‘, item.val); ???this.$menu.hide(); ???this.event.emmit(‘change‘, item); ?}};comboBox.prototype.changeText = function (item) { ?var _data = null; ?this.expandMenu(); ?var _txt = item.val(); ?if ($.trim(_txt).length > 0) { ???var reg = new RegExp(_txt, ‘i‘); ???_data =_.filter(this.opts.data, function (o) { ?????return reg.test(o.txt); ???}); ?} ?this.update(_data);};comboBox.prototype.getSelected = function () { ?return this.selected;};comboBox.prototype.setSelected = function (val) { ?this.select(val);};comboBox.prototype.onChange = function (fn) { ?this.on(‘change‘, fn);};comboBox.prototype.on = function (key, fn) { ?this.event.on(key, fn);};

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>comboBox</title> ???<link rel="stylesheet" href="bootstrap.min.css"/> ???<link rel="stylesheet" href="style.css"/> ???<script src="jquery.min.js"></script> ???<script src="underscore-min.js"></script> ???<script src="comboBox.js"></script></head><body><form> ???<div class="form-group"> ???????<label for="sel_mct">选择项：</label> ???????<input type="text" class="form-control" value="" id="sel_mct" placeholder="输入名称过滤"> ???????<input type="hidden" id="mct" name="mct"/> ???</div></form><script type="text/javascript"> ???$(function () { ???????var _combox = new comboBox($(‘#sel_mct‘), { ???????????menuStyle: {textAlign: ‘left‘}, ???????????data: [ ???????????????{val: ‘1‘, txt: ‘Microsoft‘}, ???????????????{val: ‘2‘, txt: ‘Google‘}, ???????????????{val: ‘3‘, txt: ‘Facebook‘}, ???????????????{val: ‘4‘, txt: ‘Twitter‘}, ???????????????{val: ‘5‘, txt: ‘Apple Inc.‘}, ???????????????{val: ‘6‘, txt: ‘Amazon.cn‘}, ???????????????{val: ‘7‘, txt: ‘Adobe‘}, ???????????????{val: ‘8‘, txt: ‘Oracle‘}, ???????????????{val: ‘9‘, txt: ‘LinkedIn‘}, ???????????????{val: ‘10‘, txt: ‘Alibaba‘} ???????????] ???????}); ???????_combox.on(‘change‘, function () { ???????????$(‘#mct‘).val(_combox.getSelected().val); ???????}); ???????_combox.setSelected(‘2‘); ???});</script></body></html>