网站备案号密码,合肥建设,互联网产品设计,wordpress 如何回到初始化要求实现一个轻量级的在客户端筛选的combobox#xff0c;支持大数据量#xff08;超过1000个items#xff09;#xff0c;能快速检索内容#xff0c;并支持数据的设置和活动等基本操作。在这之前尝试过使用Jquery UI的Autocomplete#xff0c;但是当数据量太大时客户端检… 要求实现一个轻量级的在客户端筛选的combobox支持大数据量超过1000个items能快速检索内容并支持数据的设置和活动等基本操作。在这之前尝试过使用Jquery UI的Autocomplete但是当数据量太大时客户端检索速度太慢甚至会导致浏览器卡死。索性干脆基于JQuery自己写一个吧 所依赖的库
BootstrapJQueryUnderscore CSS 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%;
} JavaScript /* 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 styleposition:relative;/div);
// this.$caret $(span classcombobox-menu-caret/span);
this.$menu $(ul classcombobox-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);
}; HTML !DOCTYPE html
html langen
head
meta charsetUTF-8
titlecomboBox/title
link relstylesheet hrefbootstrap.min.css/
link relstylesheet hrefstyle.css/
script srcjquery.min.js/script
script srcunderscore-min.js/script
script srccomboBox.js/script
/head
body
form
div classform-group
label forsel_mct选择项/label
input typetext classform-control value idsel_mct placeholder输入名称过滤
input typehidden idmct namemct/
/div
/form
script typetext/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 主要方法
comboBox构造函数接受一个JQuery对象作为宿主HTML元素该元素为页面上的input标签。另外一个参数指定comboBox的配置项包括 menuStyle指定下拉框的样式默认样式有maxHeight: 180. 所有样式均以JQuery css的方式进行指定。readonlyBoolean类型是否为只读。data指定数据源。数据源为JSON数组其中每一个元素是带有val和txt属性的JSONval表示item的值txt表示item的显示文本。 setSelected用于在comboBox初始化完毕之后设置默认选中的元素。接受一个字符串变量用于表示选中item的值。getSelected获取选中的item将返回一个JSON对象包含val和txt属性。onChange事件当comboBox中的item被选中时触发。 完整示例下载comboBox.zip 另外推荐一个好用的select控件功能很强大 https://select2.org/
更多专业前端知识请上
【猿2048】www.mk2048.com
