下拉选项LQuery
最近学习了一下jquery和js的面向对象的写法，写了一个下拉选项，跟大家分享一下。
001 /**
002 * Query下拉选项处理类
003 *
004 * @author 张成轩
005 * @version 1.0
006 * @email loongzcx@163.com
007 */
008 var LQuery = function() {
009 /* 下拉选项显示内容数组 */
010 this.queryArr = new Array();
011 /* 下拉选项调用对象 */
012 this.queryDoc;
013 /* Query查询标识 */
014 this.queryFlag;
015 /* 其他赋值框对象ID数组 */
016 this.docArr;
017 /* 按键点击事件对象 */
018 this.event;
019 /* 下拉选项显示x坐标 */
020 this.x = 0;
021 /* 下拉选项显示y坐标 */
022 this.y = 0;
023 /* 选项框宽度 */
024 this.width = 150;
025 /* 选项框显示列数 */
026 this.size = 8;
027 /* 是否强制刷新 */
028 this.memory = false;
029 /* 下拉选项显示分隔符 */
030 this.separator = "-";
031 /* Ajax发送连接 */
032 this.sendUrl = "./ajax.html";
033 };
034
035 LQuery.prototype = {
036 /**
037 * 修改Query默认设置
038 *
039 * @param set
040 * 默认设置对象
041 */
042 set : function(set) {
043 // 设置下拉选项宽度
044 if (set.width != undefined) {
045 this.width = set.width;
046 }
047 // 设置下拉选项框显示列数
048 if (set.size != undefined) {
049 this.size = set.size;
050 }
051 // 设置强制刷新标志
052 if (set.memory != undefined) {
053 this.memory = set.memory;
054 }
055 // 设置下拉选项显示分隔符
056 if (set.separator != undefined) {
057 this.separator = set.separator;
058 }
059 },
060
061 /**
062 * Query下拉选项调用入口函数,使用ajax获取下拉数据
063 *
064 * @param docArr
065 * 下拉选项调用对象及赋值对象ID数组
066 * @param flag
067 * Query查询标识
068 * @param event
069 * 按键点击事件,若需要兼容firefox键盘按键处理,需要传入该字段
070 * @param queryArrStr
071 * 指定下拉选项显示信息字符串
072 */
073 show : function(docArr, flag, event, queryArrStr) {
074 // 触发起始时间,用于防止并发
075 this.startTime = new Date();
076 // 按键点击事件对象
077 this.event = event;
078 // 判断是否通过setArr方法设置显示数据
079 if (this.queryArrStr != undefined) {
080 // 设置显示数据字符串
081 queryArrStr = this.queryArrStr;
082 // 清空this中的显示数据字符串,以便再次调用
083 this.queryArrStr = undefined;
084 }
085 // 判断docArr是否为数组
086 if ($.isArray(docArr)) {
087 // 获取docArr第一个元素,并从数组移除第一个元素
088 var doc = docArr.shift();
089 } else {
090 var doc = docArr;
091 // 其他赋值框对象ID数组设置为空
092 docArr = undefined;
093 }
094 // 键盘按键处理
095 if (this.keyUp()) {
096 return;
097 }
098 // 判断是否为同一个触发对象,若默认设置中的memory为true,每次调用都会强制刷新
099 if (doc != this.queryDoc || this.queryArr.length == 0 || this.memory) {
100 // 下拉选项显示内容数组
101 this.queryArr = new Array();
102 // 下拉选项调用对象
103 this.queryDoc = doc;
104 // Query查询标识
105 this.queryFlag = flag;
106 // 其它赋值框对象ID数组
107 this.docArr = docArr;
108 // 下拉选项显示坐标
109 this.setXY(doc);
110 // 检测是否设置了待显示的数据
111 if (queryArrStr != undefined) {
112 // 已指定显示数据,直接处理显示信息字符串
113 this.arrSplit(queryArrStr);
114 // 生成下拉选项
115 this.init();
116 } else {
117 // 使用ajax发送
118 this.send(this.startTime);
119 }
120 } else {
121 // 下拉选项显示坐标
122 this.setXY(doc);
123 // 生成下拉选项
124 this.init();
125 }
126 },
127
128 /**
129 * 生成下拉选项
130 */
131 init : function() {
132 // 检测_queryInf是否已经生成
133 if ($('#_queryInf').val() == undefined) {
134 $('body').append("<div id='_queryInf' style='display:none;'></div>");
135 }
136 // 生成下拉选项
137 $('#_queryInf').html("<select id='_qInf' "
138 + "style='background:#F7F6E5;font-size:10pt;font-family:宋体;width:"
139 + this.width + "px;' size=" + this.size
140 + "></select>");
141 // 设置显示菜单项
142 for ( var row = 0; row < this.queryArr.length; row++) {
143 $('#_qInf').append('<option>' + this.queryArr[row].join(this.separator)
144 + '</option>');
145 }
146 // 设置初始选中值
147 this.find($(this.queryDoc).val());
148 // 绑定双击事件
149 $('#_qInf').dblclick(this, function(event) {
150 event.data.click();
151 });
152 // 下拉选项失去焦点事件
153 $('#_qInf').focusout(function() {
154 $('#_queryInf').hide(50);
155 });
156 // 录入框失去焦点事件
157 $(this.queryDoc).focusout(function() {
158 // 判断下拉选项是否获得焦点,为了兼容火狐,使用setTimeout延迟触发
159 setTimeout(function() {
160 if (!$('#_qInf').is(':focus')) {
161 $('#_queryInf').hide(50);
162 }
163 }, 1);
164 });
165 // 下拉选项回车选取事件
166 $('#_qInf').keydown(this, function(event) {
167 if (event.keyCode == 13) {
168 event.data.click();
169 }
170 });
171 // 显示下拉选项
172 $('#_queryInf').css('position', 'absolute');
173 $('#_queryInf').css('left', this.x);
174 $('#_queryInf').css('top', this.y);
175 $('#_queryInf').show('fast');
176 },
177
178 /**
179 * 键盘按键处理函数
180 *
181 * @param event
182 * 按键点击事件,若需要兼容firefox键盘按键处理,需要传入该字段
183 */
184 keyUp : function() {
185 try {
186 var keyCode = window.event ? window.event.keyCode
187 : this.event.keyCode;
188 // 获取下拉选项已选择项
189 var row = $("#_queryInf option:selected").index();
190 if (keyCode == "38") {
191 // 键盘上键处理,选择上移
192 $('#_qInf > option:nth-child(' + row + ')').attr('selected',
193 true);
194 } else if (keyCode == "40") {
195 // 键盘下键处理,选择下移
196 $('#_qInf > option:nth-child(' + (row + 2) + ')').attr(
197 'selected', true);
198 } else if (keyCode == "13") {
199 // 键盘回车键处理,选择项赋值
200 if (row != -1) {
201 this.click();
202 return true;
203 }
204 } else {
205 return false;
206 }
207 // 下拉选项获取焦点
208 $('#_qInf').focus();
209 return true;
210 } catch (ex) {
211 return false;
212 }
213 },
214
215 /**
216 * ajax发送函数
217 *
218 * @param startTime
219 * 起始时间,防止ajax尚未处理完毕时触发其它下拉选项
220 */
221 send : function(startTime) {
222 // 调用ajax发送请求
223 $.ajax({
224 // 发送请求方式
225 type : "POST",
226 // 发送连接
227 url : this.sendUrl,
228 // 发送附加参数
229 data : "queryFlag=" + this.queryFlag,
230 // 设置返回类型
231 dataType : "text",
232 // 修改发送回调函数this指向
233 context : this,
234 // 连接返回信息预处理
235 dataFilter : function(data) {
236 return $.trim(data);
237 },
238 // 连接响应成功回调函数
239 success : function(data) {
240 // 检测是否有其它下拉选项被触发
241 if (startTime == this.startTime) {
242 // 解析ajax返回字符串
243 this.arrSplit(data);
244 // 生成下拉选项
245 this.init();
246 }
247 },
248 // 连接响应失败回调函数
249 error : function() {
250 alert("页面访问异常");
251 }
252 });
253 },
254
255 /**
256 * 下拉选项双击事件
257 */
258 click : function() {
259 // 获取点击项索引
260 var resRow = $("#_queryInf option:selected").index();
261 // 判断标识是否存在
262 if (resRow != -1 && this.queryArr[resRow] != undefined) {
263 // 设置录入框值
264 $(this.queryDoc).val(this.queryArr[resRow][0]);
265 // 判断是否有其他赋值框
266 if (this.docArr != undefined && this.docArr.length > 0) {
267 // 判断docArr是否为数组
268 for ( var row = 0; row < this.docArr.length; row++) {
269 // 设置录入框名称
270 if (row + 1 < this.queryArr[resRow].length) {
271 $('#' + this.docArr[row]).val(
272 this.queryArr[resRow][row + 1]);
273 } else {
274 // 若返回信息数组项不存在,将录入框置为空
275 $('#' + this.docArr[row]).val("");
276 }
277 }
278 }
279 // 调用点击回调处理函数,若有需要可以使用
280 try {
281 afterQueryClick(this.queryArr[resRow], this.queryFlag, this);
282 } catch (ex) {
283 }
284 // 隐藏下拉选项
285 $('#_queryInf').hide(50);
286 }
287 },
288
289 /**
290 * 设置下拉菜单选择项,支持大小写进行匹配
291 *
292 * @param value
293 * 录入框值
294 */
295 find : function(value) {
296 if (value != "") {
297 // 将字符串转换成小写
298 value = value.toLowerCase();
299 // 循环下拉选项数组
300 for ( var row = 0; row < this.queryArr.length; row++) {
301 // 将数组转换成小写字符串
302 var queryStr = this.queryArr[row].join("-").toLowerCase();
303 // 匹配下拉选项的值
304 if (value.length <= queryStr.length
305 && value == queryStr.substring(0, value.length)) {
306 // 设置选择项
307 $('#_qInf > option:nth-child(' + (row + 1) + ')').attr(
308 'selected', true);
309 break;
310 }
311 }
312 }
313 },
314
315 /**
316 * 设置下拉选项显示信息
317 *
318 * @param queryArrStr
319 * 下拉选项显示信息字符串
320 */
321 setArr : function(queryArrStr) {
322 // 设置下拉选项显示信息字符串
323 this.queryArrStr = queryArrStr;
324 // 返回本对象
325 return this;
326 },
327
328 /**
329 * 设置下拉选项显示坐标
330 *
331 * @param doc
332 * 下拉选项调用对象
333 */
334 setXY : function(doc) {
335 this.x = 0;
336 this.y = doc.offsetHeight;
337 // 累加父窗口坐标
338 while (doc.offsetParent) {
339 this.x += doc.offsetLeft;
340 this.y += doc.offsetTop;
341 doc = doc.offsetParent;
342 }
343 },
344
345 /**
346 * 显示信息字符串拆分函数
347 *
348 * @param queryArrSrt
349 * 待拆分字符串
350 */
351 arrSplit : function(queryArrSrt) {
352 // 拆分ajax返回字符串生成二维数组
353 // 按|拆分行
354 var queryArr = queryArrSrt.split("|");
355 for ( var row = 0; row < queryArr.length; row++) {
356 // 按^拆分列
357 queryArr[row] = queryArr[row].split("^");
358 }
359 this.queryArr = queryArr;
360 }
361 };
362
363 // 实例化对象
364 var query = new LQuery();
最近学习了一下jquery和js的面向对象的写法，写了一个下拉选项，跟大家分享一下。
view source
print?
001 /**
002 * Query下拉选项处理类
003 *
004 * @author 张成轩
005 * @version 1.0
006 * @email loongzcx@163.com
007 */
008 var LQuery = function() {
009 /* 下拉选项显示内容数组 */
010 this.queryArr = new Array();
011 /* 下拉选项调用对象 */
012 this.queryDoc;
013 /* Query查询标识 */
014 this.queryFlag;
015 /* 其他赋值框对象ID数组 */
016 this.docArr;
017 /* 按键点击事件对象 */
018 this.event;
019 /* 下拉选项显示x坐标 */
020 this.x = 0;
021 /* 下拉选项显示y坐标 */
022 this.y = 0;
023 /* 选项框宽度 */
024 this.width = 150;
025 /* 选项框显示列数 */
026 this.size = 8;
027 /* 是否强制刷新 */
028 this.memory = false;
029 /* 下拉选项显示分隔符 */
030 this.separator = "-";
031 /* Ajax发送连接 */
032 this.sendUrl = "./ajax.html";
033 };
034
035 LQuery.prototype = {
036 /**
037 * 修改Query默认设置
038 *
039 * @param set
040 * 默认设置对象
041 */
042 set : function(set) {
043 // 设置下拉选项宽度
044 if (set.width != undefined) {
045 this.width = set.width;
046 }
047 // 设置下拉选项框显示列数
048 if (set.size != undefined) {
049 this.size = set.size;
050 }
051 // 设置强制刷新标志
052 if (set.memory != undefined) {
053 this.memory = set.memory;
054 }
055 // 设置下拉选项显示分隔符
056 if (set.separator != undefined) {
057 this.separator = set.separator;
058 }
059 },
060
061 /**
062 * Query下拉选项调用入口函数,使用ajax获取下拉数据
063 *
064 * @param docArr
065 * 下拉选项调用对象及赋值对象ID数组
066 * @param flag
067 * Query查询标识
068 * @param event
069 * 按键点击事件,若需要兼容firefox键盘按键处理,需要传入该字段
070 * @param queryArrStr
071 * 指定下拉选项显示信息字符串
072 */
073 show : function(docArr, flag, event, queryArrStr) {
074 // 触发起始时间,用于防止并发
075 this.startTime = new Date();
076 // 按键点击事件对象
077 this.event = event;
078 // 判断是否通过setArr方法设置显示数据
079 if (this.queryArrStr != undefined) {
080 // 设置显示数据字符串
081 queryArrStr = this.queryArrStr;
082 // 清空this中的显示数据字符串,以便再次调用
083 this.queryArrStr = undefined;
084 }
085 // 判断docArr是否为数组
086 if ($.isArray(docArr)) {
087 // 获取docArr第一个元素,并从数组移除第一个元素
088 var doc = docArr.shift();
089 } else {
090 var doc = docArr;
091 // 其他赋值框对象ID数组设置为空
092 docArr = undefined;
093 }
094 // 键盘按键处理
095 if (this.keyUp()) {
096 return;
097 }
098 // 判断是否为同一个触发对象,若默认设置中的memory为true,每次调用都会强制刷新
099 if (doc != this.queryDoc || this.queryArr.length == 0 || this.memory) {
100 // 下拉选项显示内容数组
101 this.queryArr = new Array();
102 // 下拉选项调用对象
103 this.queryDoc = doc;
104 // Query查询标识
105 this.queryFlag = flag;
106 // 其它赋值框对象ID数组
107 this.docArr = docArr;
108 // 下拉选项显示坐标
109 this.setXY(doc);
110 // 检测是否设置了待显示的数据
111 if (queryArrStr != undefined) {
112 // 已指定显示数据,直接处理显示信息字符串
113 this.arrSplit(queryArrStr);
114 // 生成下拉选项
115 this.init();
116 } else {
117 // 使用ajax发送
118 this.send(this.startTime);
119 }
120 } else {
121 // 下拉选项显示坐标
122 this.setXY(doc);
123 // 生成下拉选项
124 this.init();
125 }
126 },
127
128 /**
129 * 生成下拉选项
130 */
131 init : function() {
132 // 检测_queryInf是否已经生成
133 if ($('#_queryInf').val() == undefined) {
134 $('body').append("<div id='_queryInf' style='display:none;'></div>");
135 }
136 // 生成下拉选项
137 $('#_queryInf').html("<select id='_qInf' "
138 + "style='background:#F7F6E5;font-size:10pt;font-family:宋体;width:"
139 + this.width + "px;' size=" + this.size
140 + "></select>");
141 // 设置显示菜单项
142 for ( var row = 0; row < this.queryArr.length; row++) {
143 $('#_qInf').append('<option>' + this.queryArr[row].join(this.separator)
144 + '</option>');
145 }
146 // 设置初始选中值
147 this.find($(this.queryDoc).val());
148 // 绑定双击事件
149 $('#_qInf').dblclick(this, function(event) {
150 event.data.click();
151 });
152 // 下拉选项失去焦点事件
153 $('#_qInf').focusout(function() {
154 $('#_queryInf').hide(50);
155 });
156 // 录入框失去焦点事件
157 $(this.queryDoc).focusout(function() {
158 // 判断下拉选项是否获得焦点,为了兼容火狐,使用setTimeout延迟触发
159 setTimeout(function() {
160 if (!$('#_qInf').is(':focus')) {
161 $('#_queryInf').hide(50);
162 }
163 }, 1);
164 });
165 // 下拉选项回车选取事件
166 $('#_qInf').keydown(this, function(event) {
167 if (event.keyCode == 13) {
168 event.data.click();
169 }
170 });
171 // 显示下拉选项
172 $('#_queryInf').css('position', 'absolute');
173 $('#_queryInf').css('left', this.x);
174 $('#_queryInf').css('top', this.y);
175 $('#_queryInf').show('fast');
176 },
177
178 /**
179 * 键盘按键处理函数
180 *
181 * @param event
182 * 按键点击事件,若需要兼容firefox键盘按键处理,需要传入该字段
183 */
184 keyUp : function() {
185 try {
186 var keyCode = window.event ? window.event.keyCode
187 : this.event.keyCode;
188 // 获取下拉选项已选择项
189 var row = $("#_queryInf option:selected").index();
190 if (keyCode == "38") {
191 // 键盘上键处理,选择上移
192 $('#_qInf > option:nth-child(' + row + ')').attr('selected',
193 true);
194 } else if (keyCode == "40") {
195 // 键盘下键处理,选择下移
196 $('#_qInf > option:nth-child(' + (row + 2) + ')').attr(
197 'selected', true);
198 } else if (keyCode == "13") {
199 // 键盘回车键处理,选择项赋值
200 if (row != -1) {
201 this.click();
202 return true;
203 }
204 } else {
205 return false;
206 }
207 // 下拉选项获取焦点
208 $('#_qInf').focus();
209 return true;
210 } catch (ex) {
211 return false;
212 }
213 },
214
215 /**
216 * ajax发送函数
217 *
218 * @param startTime
219 * 起始时间,防止ajax尚未处理完毕时触发其它下拉选项
220 */
221 send : function(startTime) {
222 // 调用ajax发送请求
223 $.ajax({
224 // 发送请求方式
225 type : "POST",
226 // 发送连接
227 url : this.sendUrl,
228 // 发送附加参数
229 data : "queryFlag=" + this.queryFlag,
230 // 设置返回类型
231 dataType : "text",
232 // 修改发送回调函数this指向
233 context : this,
234 // 连接返回信息预处理
235 dataFilter : function(data) {
236 return $.trim(data);
237 },
238 // 连接响应成功回调函数
239 success : function(data) {
240 // 检测是否有其它下拉选项被触发
241 if (startTime == this.startTime) {
242 // 解析ajax返回字符串
243 this.arrSplit(data);
244 // 生成下拉选项
245 this.init();
246 }
247 },
248 // 连接响应失败回调函数
249 error : function() {
250 alert("页面访问异常");
251 }
252 });
253 },
254
255 /**
256 * 下拉选项双击事件www.2cto.com
257 */
258 click : function() {
259 // 获取点击项索引
260 var resRow = $("#_queryInf option:selected").index();
261 // 判断标识是否存在
262 if (resRow != -1 && this.queryArr[resRow] != undefined) {
263 // 设置录入框值
264 $(this.queryDoc).val(this.queryArr[resRow][0]);
265 // 判断是否有其他赋值框
266 if (this.docArr != undefined && this.docArr.length > 0) {
267 // 判断docArr是否为数组
268 for ( var row = 0; row < this.docArr.length; row++) {
269 // 设置录入框名称
270 if (row + 1 < this.queryArr[resRow].length) {
271 $('#' + this.docArr[row]).val(
272 this.queryArr[resRow][row + 1]);
273 } else {
274 // 若返回信息数组项不存在,将录入框置为空
275 $('#' + this.docArr[row]).val("");
276 }
277 }
278 }
279 // 调用点击回调处理函数,若有需要可以使用
280 try {
281 afterQueryClick(this.queryArr[resRow], this.queryFlag, this);
282 } catch (ex) {
283 }
284 // 隐藏下拉选项
285 $('#_queryInf').hide(50);
286 }
287 },
288
289 /**
290 * 设置下拉菜单选择项,支持大小写进行匹配
291 *
292 * @param value
293 * 录入框值
294 */
295 find : function(value) {
296 if (value != "") {
297 // 将字符串转换成小写
298 value = value.toLowerCase();
299 // 循环下拉选项数组
300 for ( var row = 0; row < this.queryArr.length; row++) {
301 // 将数组转换成小写字符串
302 var queryStr = this.queryArr[row].join("-").toLowerCase();
303 // 匹配下拉选项的值
304 if (value.length <= queryStr.length
305 && value == queryStr.substring(0, value.length)) {
306 // 设置选择项
307 $('#_qInf > option:nth-child(' + (row + 1) + ')').attr(
308 'selected', true);
309 break;
310 }
311 }
312 }
313 },
314
315 /**
316 * 设置下拉选项显示信息
317 *
318 * @param queryArrStr
319 * 下拉选项显示信息字符串
320 */
321 setArr : function(queryArrStr) {
322 // 设置下拉选项显示信息字符串
323 this.queryArrStr = queryArrStr;
324 // 返回本对象
325 return this;
326 },
327
328 /**
329 * 设置下拉选项显示坐标
330 *
331 * @param doc
332 * 下拉选项调用对象
333 */
334 setXY : function(doc) {
335 this.x = 0;
336 this.y = doc.offsetHeight;
337 // 累加父窗口坐标
338 while (doc.offsetParent) {
339 this.x += doc.offsetLeft;
340 this.y += doc.offsetTop;
341 doc = doc.offsetParent;
342 }
343 },
344
345 /**
346 * 显示信息字符串拆分函数
347 *
348 * @param queryArrSrt
349 * 待拆分字符串
350 */
351 arrSplit : function(queryArrSrt) {
352 // 拆分ajax返回字符串生成二维数组
353 // 按|拆分行
354 var queryArr = queryArrSrt.split("|");
355 for ( var row = 0; row < queryArr.length; row++) {
356 // 按^拆分列
357 queryArr[row] = queryArr[row].split("^");
358 }
359 this.queryArr = queryArr;
360 }
361 };
362
363 // 实例化对象
364 var query = new LQuery();
作者：张成轩
