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>