easyui.hp.myCombobox.js
3.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/**
* 显示一个带搜索功能的组合框
* 作者:黄平
* 日期:2016-09-09
*/
(function($) {
$.fn.myCombobox = function(options, param) {
var self = this;
if (typeof (options) == "string") {
var method = $.fn.myCombobox.methods[options];
if (method){
return method.call(this, param);
} else {
return this.combobox(options, param);
}
}
return this.each(function() {
var opt = $.extend({}, $.fn.myCombobox.defaults, options);
$(self).data("myCombobox", opt)
_create(self);
});
};
/**
* 创建
* @param jq
* @returns
*/
function _create(jq) {
var opt = jq.data("myCombobox");
var o = $.extend({}, opt, {
icons : [{
iconCls : "icon-clear",
handler : function(e) {
$(e.data.target).combobox("clear");
}
}],
editable : false,
onShowPanel : function() {
if (opt.onShowPanel) {
opt.onShowPanel.call();
}
var dropPanel = jq.myCombobox("panel");
var searchText = _getSearchText(jq);
searchText.val("");
searchText.width(dropPanel.width() - 8);
_getListDiv(jq).height(dropPanel.height() - searchText.height() - 10);
},
onLoadSuccess : function() {
if (opt.onLoadSuccess) {
opt.onLoadSuccess.call(this);
}
_addSearchText(jq);
jq.loadSuccess();
}
});
jq.combobox(o);
}
function _addSearchText(jq) {
var opt = jq.data("myCombobox");
//添加搜索框
var searchTextDiv = $("<div role='comboboxSearchTextDiv'>");
var searchText = $("<input type='text' role='comboboxSearchText'>").appendTo(searchTextDiv);
var dropPanel = jq.myCombobox("panel").css({
overflow : "hidden"
});
dropPanel.prepend(searchTextDiv);
var oldList = dropPanel.find("div.combobox-item");
var listDiv = $("<div role='comboboxListDiv'>").css({
overflow : "auto"
}).appendTo(dropPanel);
listDiv.append(oldList);
searchText.keyup(function() {
var value = this.value;
var d = opt.loadFilter ? opt.loadFilter(opt.data) : opt.data;
if (value == "") {
//当输入内容为空时,则显示所有
_getListDiv(jq).find("div").show();
return;
}
var data = [];
var list = _getListDiv(jq).find("div");
$(list).each(function(item, index) {
if ($(this).html().toLowerCase().indexOf(value.toLowerCase()) >= 0) {
$(this).show();
} else {
$(this).hide();
}
});
});
}
//添加
function _showList(jq, data) {
var opt = jq.data("myCombobox");
var listPanel = _getListDiv(jq);
listPanel.empty();
if (!data || data.length == 0) {
return;
}
jq.myCombobox("loadData", opt.unLoadFilter ? opt.unLoadFilter(data) : data);
}
/**
* 获取列表
*/
function _getSearchTextDiv(jq) {
return jq.combobox("panel").find("div[role='comboboxSearchTextDiv']");
}
/**
* 获取搜索输入框
*/
function _getSearchText(jq) {
return jq.combobox("panel").find("input[role='comboboxSearchText']");
}
/**
* 获取列表的div
*/
function _getListDiv(jq) {
return jq.combobox("panel").find("div[role='comboboxListDiv']");
}
//方法
$.fn.myCombobox.methods = {
};
//事件
$.fn.myCombobox.event = {
};
//属性
$.fn.myCombobox.defaults = $.extend({}, $.fn.myCombobox.event, $.fn.combobox.defaults, {
unLoadFilter : function(data) { //重新组装list
return {
code : 200,
data :data
};
}
});
})(jQuery);