可输入文字查找ajax下拉框控件 ComBox的实现方法

187 阅读 0 评论 124 点赞

我是靠谱客的博主烂漫硬币，这篇文章主要介绍可输入文字查找ajax下拉框控件 ComBox的实现方法，现在分享给大家，希望可以做个参考。

GooFunc.js文件

复制代码

//获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到
function getElCoordinate(dom) {
 var t = dom.offsetTop;
 var l = dom.offsetLeft;
 dom=dom.offsetParent;
 while (dom) {
  t += dom.offsetTop;
  l += dom.offsetLeft;
	dom=dom.offsetParent;
 }; return {
  top: t,
  left: l
 };
}
//兼容各种浏览器的,获取鼠标真实位置
function mousePosition(ev){
	if(!ev) ev=window.event;
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  return {
    x:ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.documentElement.scrollTop - document.body.clientTop
  };
}
//给DATE类添加一个格式化输出字串的方法
Date.prototype.format = function(format)  
{  
  var o = {  
   "M+" : this.getMonth()+1, //month 
   "d+" : this.getDate(),  //day 
   "h+" : this.getHours(),  //hour 
   "m+" : this.getMinutes(), //minute 
   "s+" : this.getSeconds(), //second ‘
	 //quarter 
   "q+" : Math.floor((this.getMonth()+3)/3), 
   "S" : this.getMilliseconds() //millisecond 
  }  
  if(/(y+)/.test(format)) format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));  
  for(var k in o)if(new RegExp("("+ k +")").test(format))  
   format = format.replace(RegExp.$1,  
    RegExp.$1.length==1 ? o[k] :  
     ("00"+ o[k]).substr((""+ o[k]).length));  
  return format;
}

<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript">GooCombo.JS文件</pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre name="code" class="javascript">/*下拉框定义--GooCombo类*/
//dom :要被绑定的DOM对象，必须要有其ID或者NAME，且未被JQUERY对象化
//property :JSON变量，SLIDER的详细参数设置
//目前，构造函数可接受用普通DOM容器或者直接传送SELECT控件来进行渲染
function GooCombo(dom,property){
	this.$div=null;//渲染完毕后最父框架的DIV
	this.$id=null;//this.$div中SELECT控件的ID
	this.$name=null;//this.$div中SELECT控件的NAME
	this.$width = property.width; //下拉框控件的宽度，必填项
  
	this.$haveIcon=property.haveIcon||false;
	this.$input = $("<input type='text' value='" + property.text + "' " + (property.readOnly ? "readonly='readonly'" : "") + (this.$haveIcon ? " style='margin-left:20px;width:" + (this.$width - 39) + "px'" : "") + "/>"); //下拉框控件中始终显示的文本框INPUT
	this.$btn=$("<div class='btn_up'></div>");//下拉框右部的按钮
	this.$data=[];//下拉框控件的所有显示文字和值,二维数组
	this.$type="basic";//下拉框控件的运行模式，有basic基本,multiple可多选,filter过滤显示 三种,默认为basic
	this.$selectHeight=property.selectHeight||0;
	this.$list=$("<ul style='width:"+(this.$width-2)+"px;height:"+property.selectHeight+"px;'></ul>");//下拉框的列表JQUERY对象
	this.$lastSelect=null;//当前最近一次被选中的单元,在this.$type="multiple"时，它将不发挥其记录作用
	this.$select = null; //保存所选值的单元一般为select控件
	this.$autoLoad=false;//是否动设置为动态载入数据，既下拉动作触发时再载入数据，默认为FALSE()
	this.$alreadyLoad=false;//是否已经载入完了数据,默认为false
	//设置为动态自动获取数据(渲染后Combo中的input框被选中后载入数据)
	this.setAutoLoad=function(bool){
		this.$autoLoad=true;
	};
	if(property.autoLoad) this.setAutoLoad(property.autoLoad);
	this.$ajaxType=null;//，其变量为一个远程链接参数的JSON数组，格式例如：{url:"website/pp.php",type:"POST",para:(与JQUERY中的AJAX方法中传参DATA一样)}默认为空
	this.setAjaxType=function(json){
		this.$ajaxType.url=json.url;
		this.$ajaxType.type=json.type;
		this.$ajaxType.para=json.para;
		this.$ajaxType.dataType=json.dataType;
	};
if (property.ajaxType) this.setAjaxType(property.ajaxType);

//开始构造函数主要内容
	if(dom!=null && dom.tagName=="SELECT"){
		var temp="";
		for(var i=0;i<dom.length;i++){
			this.$data[i]=[(dom.options[i].value||dom.options[i].text),dom.options[i].text,""];
			temp+="<a href='#'><p "+"value='"+this.$data[i][0]+"'>"+this.$data[i][1]+"</p></a>";
		}
		this.$list.append(temp);
		this.$id=dom.id;
		this.$name=dom.name;
		if(dom.multiple) this.$type="multiple";
		this.$select=$(dom);
		this.$select.wrap("<div class='Combo' id='Combo_"+this.$id+"'></div>")
		this.$div=this.$select.parent(".Combo");
	}
	else{
		this.$div=$(dom);
		this.$div.addClass("Combo");
		this.$select=$("<select></select>");
		this.$div.append(this.$select);
	}
	//this.$div.before(this.$septum);
	this.$div.css({width:this.$width+"px"});
	this.$div.append("<div class='text' style='width:"+(this.$width-19)+"px;'></div>").append(this.$btn).append(this.$list);
	this.$div.children("div:eq(0)").append("<div class='top_border'></div>").append(this.$input);
	
	//如果DOM为一个SELECT控件，则property中的属性还可以覆盖掉原来的ID，NAME ,type="multple"的默认设置
	//ID,NAME,TYPE如果在传入SELECT时就已经通过SELECT来定义，则PROPERTY中可以不用再写
	if(property.id)		{this.$id=property.id;this.$select.attr("id",property.id);}
	if(property.name)	{this.$name=property.name;this.$select.attr("name",property.name);}
	if(property.type){
		this.$type=property.type;
		if(property.type=="multiple") {this.$select.attr("size",1);this.$select.attr("multiple",property.type);}
		else	this.$select.removeAttr("multiple");
	}
	//载入一组数据的方法
	this.loadListData = function (data) {
	  this.$data = [];
	  if (this.$list.children("a").length > 0) {
	    this.$list.empty();
	    this.$select.empty();
	  }
	  temp = "", temp2 = "";
	  for (i = 0; i < data.length; ++i) {
	    this.$data[i] = [data[i][0], data[i][1], data[i][2] || ""];
	    if (this.$type== "filter")//在这里可以修改你想类型 basic 当鼠标点击进去是否展现初始数据
	      temp += "<a href='#'><p " + (this.$haveIcon ? "style='text-indent:19px;background:" + this.$data[i][2] + "' " : "") + "value='" + this.$data[i][0] + "'>" + this.$data[i][1] + "</p></a>";
	    temp2 += "<option value='" + this.$data[i][0] + "'>" + this.$data[i][1] + "</option>";
	  }
	  if (this.$type == "filter")
	  
	
	  this.$list.append(temp);
	  this.$select.append(temp2);
	  this.$alreadyLoad = true;
	};
	if(property.data)	this.loadListData(property.data);
	//动态远程载入数据，AJAX请求的参数将读取this.$ajaxType中的设置
	this.loadListDataAjax=function(){
		var inthis=this;
		$.ajax({
			  type:this.$ajaxType.type,
			  url:this.$ajaxType.url,
			  dataType:this.$ajaxType.dataType,
			  data:this.$ajaxType.para,
		success:function(data){
			inthis.loadListData(data);
		}});

};

//提示文字
$("input[type='text']").each(function () {
  if ($(this).val() == property.text) {
    $(this).bind("focus", function () {
      $(this).val("");
    }).blur(function () {
      $(this).val(property.text)
    });

}
});

//绑定当INPUT框被选中时的事件
	this.$input.bind("focus", { inthis: this }, //如果this.$autoLoad或!this.$alreadyLoad有一个为FALSE，则ajaxType将无效，可不传
	function (e) {
	  if (e && e.preventDefault) e.preventDefault(); //阻止默认浏览器动作(W3C)
	  else window.event.returnValue = false; //IE中阻止函数器默认动作的方式
	  var inthis = e.data.inthis;
//	  inthis.$autoLoad = true;
//	
//	
//	  inthis.$alreadyLoad = false;
//	  inthis.$ajaxType = false;
	  if (!inthis.$alreadyLoad && inthis.$autoLoad) {

if (inthis.$ajaxType) {//如果是远程AJAX获取数据

inthis.loadListDataAjax();
	    }
	    else 
      {
	      inthis.loadListData(inthis.$data);
	    }

}
	  var list = inthis.$list;

var data = inthis.$data;
		    var temp = "";

if (inthis.$ajaxType) {//如果ajaxType属性有设置，则filter模式下，下拉框控件将在每次change时，动态从获取数据
		      inthis.$ajaxType.para["search"] = text; //后台需要对REQUEST传入的search变量有一个向前模糊匹配的查询功能
		      inthis.loadListDataAjax();
		    }
		    else {
		      for (var i = 0; i < data.length; ++i)
          {
		        if (data[i][1].indexOf(text) == 0)
		        temp +="<a href='#'><p " + (inthis.$haveIcon ? "style='text-indent:19px;background:" + data[i][2] + "' " : "") + "value='" + data[i][0] + "'>" + data[i][1] + "</p></a>";
		      }
		      inthis.$list.empty();
		      inthis.$list.append(temp);
		    }
		  });
		}
		else{
		  this.$input.bind("change", { inthis: this }, function (e) {
		    var text = this.value;
		    var inthis = e.data.inthis;
		    var data = e.data.inthis.$data;
		 
		    for (var i = 0; i < data.length; ++i) {
		      if (data[i][1] == text) {
		        if (inthis.$lastSelect)
		          inthis.$lastSelect.removeClass("active");
		        inthis.$lastSelect = inthis.$list.children("a:eq(" + i + ")").addClass("active");
		        now = inthis.$list.children("a:eq(" + i + ")").children("p");
		        inthis.$select.val(data[i][0]);
		        if (inthis.$haveIcon) {
		          $(this).parent(".text").css({
		            background: now.css("background"),
		            "background-image": "url(../images/combo_icon.gif)",
		            "background-position": now.css("background-position"),
		            "background-repeat": now.css("background-repeat")
		          });
		        }
		        break;
		      }
		    }
		  });
		}
		var once=null;
		this.$input.bind("keyup", { input: this.$input, list: this.$list }, function (e) {
		  if (!e) e = window.event;
		  if (e.keyCode == 13)
		    e.data.list.css("display", "none");
		  else if (e.keyCode == 40) {
		    var temp = e.data.list.children("a:eq(0)");
		    temp.focus();
		    temp.toggleClass("focus");
		  }
		  else {
		    //alert("进入keyup");
		    once = null;
		    once = setTimeout(function () { e.data.input.change(); }, 500);
		  }
		});
	}
	//绑定下拉按钮的事件
	this.$btn.bind("mousedown",function(){
		inthis=$(this);
		inthis.removeClass("btn_up");
		inthis.addClass("btn_down");
	});
	this.$btn.bind("mouseup",{input:this.$input},function(e){
		inthis=$(this);
		inthis.removeClass("btn_down");
		inthis.addClass("btn_up");
		e.data.input.focus();
	});
	//选中下拉框中一个指定索引的值（如果是multiple模式，且这个值原来已经被选定，则运行此函数后将会取消该选定）
	this.selectValue=function(index){
		if(index>0&&index<this.$data.length){
			var p=this.$list.children("a:eq("+index+")");
			if(this.$lastSelect)	this.$lastSelect.removeClass("active");
			this.$lastSelect=p;
			p.click();
		}
	};
	//绑定下拉列表单元被点击时的事件
	this.$list.bind("click",{inthis:this},function(e){
		if ( e && e.preventDefault )	e.preventDefault();//阻止默认浏览器动作(W3C)
		else	window.event.returnValue = false;//IE中阻止函数器默认动作的方式
		if(!e) e=window.event;
		var clicked=$(e.target);
		var inthis=e.data.inthis;
		if(clicked.attr("tagName")=="A")	clicked=clicked.children("p");
		else if(clicked.attr("tagName")=="UL"){
			this.style.display="none";
			return;
		}				
		if(inthis.$haveIcon){
			inthis.$input.parent(".text").css({
			background:clicked.css("background"),
			"background-image":"url(../images/combo_icon.gif)",
			"background-position":clicked.css("background-position"),
			"background-repeat":clicked.css("background-repeat")	
			});
		}
		if(inthis.$type!="multiple"){
			if(inthis.$lastSelect)	inthis.$lastSelect.removeClass("active");
			inthis.$lastSelect=clicked.parent("a").addClass("active");
			this.style.display="none";
			inthis.$select.val(clicked.attr("value"));
			inthis.$input.val(clicked.text());
		}
		else{
			clicked.parent("a").toggleClass("active");
			var optionList=inthis.$select.get(0).options;
			for(var i=0;i<optionList.length;++i){
				if(optionList[i].value==clicked.attr("value")){
					optionList[i].selected=!optionList[i].selected;
					break;
				}
			}
			inthis.$input.val(clicked.text()+" , ……");
		}
		inthis.$select.change();
		//alert(inthis.$select.val());
		return false;
	});
	//绑定当用户用鼠标上/下滑过选择列表内容时的事件
	this.$list.bind("mouseover",{list:this.$list},function(e){
		if(!e) e=window.event;
		var clicked=$(e.target);
		if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");
		else if(clicked.attr("tagName")=="UL"){
			return;
		}
		clicked.focus();
		clicked.addClass("focus");
	});
	this.$list.bind("mouseout",{list:this.$list},function(e){
		if(!e) e=window.event;
		var clicked=$(e.target);
		if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");
		else if(clicked.attr("tagName")=="UL")	return;
		clicked.removeClass("focus");
	});
	//绑定当用户用上/下方向键选择列表内容时的事件
	this.$list.bind("keydown",{inthis:this},function(e){
		if(!e) e=window.event;
		var inthis=e.data.inthis;
		if(e.keyCode==13){//回车
			if ( e && e.preventDefault )	e.preventDefault();//阻止默认浏览器动作(W3C)
			else	window.event.returnValue = false;//IE中阻止函数器默认动作的方式
			var clicked=$(e.target);
			if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");
			else if(clicked.attr("tagName")=="UL")	return;
			clicked.focus();
			clicked.click();
			return false;
		}
		else if(e.keyCode==40){
			var clicked=$(e.target);
			if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");
			else if(clicked.attr("tagName")=="UL")	return;
			var now=$(e.target);
			var next=$(e.target).next("a:eq(0)");
			if(next.length>0){
				now.removeClass("focus");
				next.addClass("focus");
				next.focus();
			}
		}
		else if(e.keyCode==38){
			var clicked=$(e.target);
			if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");
			else if(clicked.attr("tagName")=="UL")	return;
			var now=$(e.target);
			var prev=$(e.target).prev("a");
			if(prev.length>0){
				now.removeClass("focus");
				prev.addClass("focus");
				prev.focus();
			}
		}
	});
	//返回下拉框的被选值//如果是多选，则会返回一串值构成的字符串，以逗号隔开
	//此下拉框也可放在一般的FORM之中，并像普通的SELECT下拉菜单控件一样操作，当FORM提交时，后台可request获取一个被选取值的数组
	this.getValue=function(){
		return this.$select.val();
	};

//绑定当控件中隐藏的SELECT的值变化以后,触发的方法,通过对其设置，可达到drop-on-drop的多个下拉框相互联动功能,参数Fn为要触发执行的函数
	this.bindValueChange=function(Fn){
	  this.$select.bind("change", Fn);

};
	//删除一个选择项,index为定位参数，从0开始（即第一行的选择项）
	this.delItem=function(index){
		if(index>-1&&index<this.$data.length){
			this.$data.splice(index,1);
			this.$select.get(0).options.remove(index);
			this.$list.children("a:eq("+index+")").remove();
		}
	};
	//增加一个选择项，项,index为定位参数，从0开始（即第一行的选择项）
	this.addItem=function(index,Item){
		if(index=this.$data.length){//如果是加在最末尾
			this.$data[index]=Item;
			this.$list.append("<a href='#'><p "+(this.$haveIcon? "style='text-indent:19px;background:"+Item[2]+"' " : "")+"value='"+Item[0]+"'>"+Item[1]+"</p></a>");
		}
		else{
			this.$data.splice(index,0,Item);
			this.$list.children("a:eq("+index+")").before("<a href='#'><p "+(this.$haveIcon? "style='text-indent:19px;background:"+Item[2]+"' " : "")+"value='"+Item[0]+"'>"+Item[1]+"</p></a>");
		}
		this.$select.get(0).options.add(new Option(Item[1], Item[0]));
	};
	//清除所有选项
	this.clearItems=function(){
		this.$data=null;
		this.$data=[];
		this.$list.empty();
		this.$select.get(0).options.length=0;
		this.$select.empty();
		this.$alreadyLoad=false;
	};
}

//将此类的构造函数加入至JQUERY对象中
jQuery.extend({
	createGooCombo: function(dom,property) {
		return new GooCombo(dom,property);
 }
}); </pre><br>
HTML页面:(要先引入jquery 库)<br>
       $(document).ready(function () {<br>
              <br>
           //创建控件开始<br>
            var property =<br>
           {<br>
               id: "demo",<br>
               name: "demo",<br>
               type: "filter",<br>
               readOnly: false,<br>
               width: 160,<br>
               selectHeight: 140,<br>
               autoLoad: true,<br>
               haveIcon: false,<br>
               text: "可输入员工姓名查找"<br>
           }<br>
             var combo = $.createGooCombo(document.getElementById("combo"), property);<br>
             combo.loadListData(datas);<br>
             //创建控件结束<br>
})<br>
<br>
<span style="color:#FF0000">datas是由ashx一般处理文件生成二维数组的json字符串 var datas=["+jsonString+"]</span><br>
<pre name="code" class="vb"> </pre><pre name="code" class="csharp">  public string CreateJsonParameters(DataTable dt)
  {
    System.Text.StringBuilder sb = new System.Text.StringBuilder();

if (dt != null)
    {
      for (int i = 0; i < dt.Rows.Count -1; i++)
      {
        if (i < dt.Rows.Count - 1)
        {
          sb.Append("[" + dt.Rows[i]["EmployeeID"].ToString() + ", " + dt.Rows[i]["EmployeeNameID"].ToString() + "],");
        
        }
        else if (i == dt.Rows.Count - 1)
        {
          sb.Append("[" + dt.Rows[i]["EmployeeID"].ToString() + "," + dt.Rows[i]["EmployeeNameID"].ToString() + "],");
        }
      }
    }
      
     return   sb.ToString().TrimEnd(",".ToCharArray());
  
  }</pre><br>
<br>
<br>
<br>
 
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
  
</pre></pre></pre>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
//获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到
function getElCoordinate(dom) {
 var t = dom.offsetTop;
 var l = dom.offsetLeft;
 dom=dom.offsetParent;
 while (dom) {
  t += dom.offsetTop;
  l += dom.offsetLeft;
	dom=dom.offsetParent;
 }; return {
  top: t,
  left: l
 };
}
//兼容各种浏览器的,获取鼠标真实位置
function mousePosition(ev){
	if(!ev) ev=window.event;
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  return {
    x:ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.documentElement.scrollTop - document.body.clientTop
  };
}
//给DATE类添加一个格式化输出字串的方法
Date.prototype.format = function(format)  
{  
  var o = {  
   "M+" : this.getMonth()+1, //month 
   "d+" : this.getDate(),  //day 
   "h+" : this.getHours(),  //hour 
   "m+" : this.getMinutes(), //minute 
   "s+" : this.getSeconds(), //second ‘
	 //quarter 
   "q+" : Math.floor((this.getMonth()+3)/3), 
   "S" : this.getMilliseconds() //millisecond 
  }  
  if(/(y+)/.test(format)) format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));  
  for(var k in o)if(new RegExp("("+ k +")").test(format))  
   format = format.replace(RegExp.$1,  
    RegExp.$1.length==1 ? o[k] :  
     ("00"+ o[k]).substr((""+ o[k]).length));  
  return format;
}


<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript">GooCombo.JS文件</pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre name="code" class="javascript">/*下拉框定义--GooCombo类*/
//dom :要被绑定的DOM对象，必须要有其ID或者NAME，且未被JQUERY对象化
//property :JSON变量，SLIDER的详细参数设置
//目前，构造函数可接受用普通DOM容器或者直接传送SELECT控件来进行渲染
function GooCombo(dom,property){
	this.$div=null;//渲染完毕后最父框架的DIV
	this.$id=null;//this.$div中SELECT控件的ID
	this.$name=null;//this.$div中SELECT控件的NAME
	this.$width = property.width; //下拉框控件的宽度，必填项
  
	this.$haveIcon=property.haveIcon||false;
	this.$input = $("<input type='text' value='" + property.text + "' " + (property.readOnly ? "readonly='readonly'" : "") + (this.$haveIcon ? " style='margin-left:20px;width:" + (this.$width - 39) + "px'" : "") + "/>"); //下拉框控件中始终显示的文本框INPUT
	this.$btn=$("<div class='btn_up'></div>");//下拉框右部的按钮
	this.$data=[];//下拉框控件的所有显示文字和值,二维数组
	this.$type="basic";//下拉框控件的运行模式，有basic基本,multiple可多选,filter过滤显示 三种,默认为basic
	this.$selectHeight=property.selectHeight||0;
	this.$list=$("<ul style='width:"+(this.$width-2)+"px;height:"+property.selectHeight+"px;'></ul>");//下拉框的列表JQUERY对象
	this.$lastSelect=null;//当前最近一次被选中的单元,在this.$type="multiple"时，它将不发挥其记录作用
	this.$select = null; //保存所选值的单元一般为select控件
	this.$autoLoad=false;//是否动设置为动态载入数据，既下拉动作触发时再载入数据，默认为FALSE()
	this.$alreadyLoad=false;//是否已经载入完了数据,默认为false
	//设置为动态自动获取数据(渲染后Combo中的input框被选中后载入数据)
	this.setAutoLoad=function(bool){
		this.$autoLoad=true;
	};
	if(property.autoLoad) this.setAutoLoad(property.autoLoad);
	this.$ajaxType=null;//，其变量为一个远程链接参数的JSON数组，格式例如：{url:"website/pp.php",type:"POST",para:(与JQUERY中的AJAX方法中传参DATA一样)}默认为空
	this.setAjaxType=function(json){
		this.$ajaxType.url=json.url;
		this.$ajaxType.type=json.type;
		this.$ajaxType.para=json.para;
		this.$ajaxType.dataType=json.dataType;
	};
if (property.ajaxType) this.setAjaxType(property.ajaxType);


	//开始构造函数主要内容
	if(dom!=null && dom.tagName=="SELECT"){
		var temp="";
		for(var i=0;i<dom.length;i++){
			this.$data[i]=[(dom.options[i].value||dom.options[i].text),dom.options[i].text,""];
			temp+="<a href='#'><p "+"value='"+this.$data[i][0]+"'>"+this.$data[i][1]+"</p></a>";
		}
		this.$list.append(temp);
		this.$id=dom.id;
		this.$name=dom.name;
		if(dom.multiple) this.$type="multiple";
		this.$select=$(dom);
		this.$select.wrap("<div class='Combo' id='Combo_"+this.$id+"'></div>")
		this.$div=this.$select.parent(".Combo");
	}
	else{
		this.$div=$(dom);
		this.$div.addClass("Combo");
		this.$select=$("<select></select>");
		this.$div.append(this.$select);
	}
	//this.$div.before(this.$septum);
	this.$div.css({width:this.$width+"px"});
	this.$div.append("<div class='text' style='width:"+(this.$width-19)+"px;'></div>").append(this.$btn).append(this.$list);
	this.$div.children("div:eq(0)").append("<div class='top_border'></div>").append(this.$input);
	
	//如果DOM为一个SELECT控件，则property中的属性还可以覆盖掉原来的ID，NAME ,type="multple"的默认设置
	//ID,NAME,TYPE如果在传入SELECT时就已经通过SELECT来定义，则PROPERTY中可以不用再写
	if(property.id)		{this.$id=property.id;this.$select.attr("id",property.id);}
	if(property.name)	{this.$name=property.name;this.$select.attr("name",property.name);}
	if(property.type){
		this.$type=property.type;
		if(property.type=="multiple") {this.$select.attr("size",1);this.$select.attr("multiple",property.type);}
		else	this.$select.removeAttr("multiple");
	}
	//载入一组数据的方法
	this.loadListData = function (data) {
	  this.$data = [];
	  if (this.$list.children("a").length > 0) {
	    this.$list.empty();
	    this.$select.empty();
	  }
	  temp = "", temp2 = "";
	  for (i = 0; i < data.length; ++i) {
	    this.$data[i] = [data[i][0], data[i][1], data[i][2] || ""];
	    if (this.$type== "filter")//在这里可以修改你想类型 basic 当鼠标点击进去是否展现初始数据
	      temp += "<a href='#'><p " + (this.$haveIcon ? "style='text-indent:19px;background:" + this.$data[i][2] + "' " : "") + "value='" + this.$data[i][0] + "'>" + this.$data[i][1] + "</p></a>";
	    temp2 += "<option value='" + this.$data[i][0] + "'>" + this.$data[i][1] + "</option>";
	  }
	  if (this.$type == "filter")
	  
	
	  this.$list.append(temp);
	  this.$select.append(temp2);
	  this.$alreadyLoad = true;
	};
	if(property.data)	this.loadListData(property.data);
	//动态远程载入数据，AJAX请求的参数将读取this.$ajaxType中的设置
	this.loadListDataAjax=function(){
		var inthis=this;
		$.ajax({
			  type:this.$ajaxType.type,
			  url:this.$ajaxType.url,
			  dataType:this.$ajaxType.dataType,
			  data:this.$ajaxType.para,
		success:function(data){
			inthis.loadListData(data);
		}});

};

//提示文字
$("input[type='text']").each(function () {
  if ($(this).val() == property.text) {
    $(this).bind("focus", function () {
      $(this).val("");
    }).blur(function () {
      $(this).val(property.text)
    });

  }
});

	//绑定当INPUT框被选中时的事件
	this.$input.bind("focus", { inthis: this }, //如果this.$autoLoad或!this.$alreadyLoad有一个为FALSE，则ajaxType将无效，可不传
	function (e) {
	  if (e && e.preventDefault) e.preventDefault(); //阻止默认浏览器动作(W3C)
	  else window.event.returnValue = false; //IE中阻止函数器默认动作的方式
	  var inthis = e.data.inthis;
//	  inthis.$autoLoad = true;
//	
//	
//	  inthis.$alreadyLoad = false;
//	  inthis.$ajaxType = false;
	  if (!inthis.$alreadyLoad && inthis.$autoLoad) {

	    if (inthis.$ajaxType) {//如果是远程AJAX获取数据

	      inthis.loadListDataAjax();
	    }
	    else 
      {
	      inthis.loadListData(inthis.$data);
	    }

	  }
	  var list = inthis.$list;

	  var height = inthis.$selectHeight;
	  var width = inthis.$width;
	  list.css("display", "block");
	  $(document).bind("mouseup", function (e) {
	    var locate = getElCoordinate(list.get(0));
	    var ev = mousePosition(e);
	    if (locate.left + width < ev.x || locate.left > ev.x || locate.top - 22 > ev.y || locate.top + height + 2 < ev.y) {
	      list.css("display", "none");
	    }
	    this.onmouseup = null;
	    return false;
	  });
	  return false;
	});
	//绑定当INPUT框中的内容被改变时的事件
	if(!this.$readOnly){
		if(this.$type=="filter"){//当type=="filter"时
		  this.$input.bind("change", { inthis: this }, function (e) {
		    var inthis = e.data.inthis;
		    //var text=""+this.value;
		    var text = $.trim(this.value)

		    var data = inthis.$data;
		    var temp = "";

		    if (inthis.$ajaxType) {//如果ajaxType属性有设置，则filter模式下，下拉框控件将在每次change时，动态从获取数据
		      inthis.$ajaxType.para["search"] = text; //后台需要对REQUEST传入的search变量有一个向前模糊匹配的查询功能
		      inthis.loadListDataAjax();
		    }
		    else {
		      for (var i = 0; i < data.length; ++i)
          {
		        if (data[i][1].indexOf(text) == 0)
		        temp +="<a href='#'><p " + (inthis.$haveIcon ? "style='text-indent:19px;background:" + data[i][2] + "' " : "") + "value='" + data[i][0] + "'>" + data[i][1] + "</p></a>";
		      }
		      inthis.$list.empty();
		      inthis.$list.append(temp);
		    }
		  });
		}
		else{
		  this.$input.bind("change", { inthis: this }, function (e) {
		    var text = this.value;
		    var inthis = e.data.inthis;
		    var data = e.data.inthis.$data;
		 
		    for (var i = 0; i < data.length; ++i) {
		      if (data[i][1] == text) {
		        if (inthis.$lastSelect)
		          inthis.$lastSelect.removeClass("active");
		        inthis.$lastSelect = inthis.$list.children("a:eq(" + i + ")").addClass("active");
		        now = inthis.$list.children("a:eq(" + i + ")").children("p");
		        inthis.$select.val(data[i][0]);
		        if (inthis.$haveIcon) {
		          $(this).parent(".text").css({
		            background: now.css("background"),
		            "background-image": "url(../images/combo_icon.gif)",
		            "background-position": now.css("background-position"),
		            "background-repeat": now.css("background-repeat")
		          });
		        }
		        break;
		      }
		    }
		  });
		}
		var once=null;
		this.$input.bind("keyup", { input: this.$input, list: this.$list }, function (e) {
		  if (!e) e = window.event;
		  if (e.keyCode == 13)
		    e.data.list.css("display", "none");
		  else if (e.keyCode == 40) {
		    var temp = e.data.list.children("a:eq(0)");
		    temp.focus();
		    temp.toggleClass("focus");
		  }
		  else {
		    //alert("进入keyup");
		    once = null;
		    once = setTimeout(function () { e.data.input.change(); }, 500);
		  }
		});
	}
	//绑定下拉按钮的事件
	this.$btn.bind("mousedown",function(){
		inthis=$(this);
		inthis.removeClass("btn_up");
		inthis.addClass("btn_down");
	});
	this.$btn.bind("mouseup",{input:this.$input},function(e){
		inthis=$(this);
		inthis.removeClass("btn_down");
		inthis.addClass("btn_up");
		e.data.input.focus();
	});
	//选中下拉框中一个指定索引的值（如果是multiple模式，且这个值原来已经被选定，则运行此函数后将会取消该选定）
	this.selectValue=function(index){
		if(index>0&&index<this.$data.length){
			var p=this.$list.children("a:eq("+index+")");
			if(this.$lastSelect)	this.$lastSelect.removeClass("active");
			this.$lastSelect=p;
			p.click();
		}
	};
	//绑定下拉列表单元被点击时的事件
	this.$list.bind("click",{inthis:this},function(e){
		if ( e && e.preventDefault )	e.preventDefault();//阻止默认浏览器动作(W3C)
		else	window.event.returnValue = false;//IE中阻止函数器默认动作的方式
		if(!e) e=window.event;
		var clicked=$(e.target);
		var inthis=e.data.inthis;
		if(clicked.attr("tagName")=="A")	clicked=clicked.children("p");
		else if(clicked.attr("tagName")=="UL"){
			this.style.display="none";
			return;
		}				
		if(inthis.$haveIcon){
			inthis.$input.parent(".text").css({
			background:clicked.css("background"),
			"background-image":"url(../images/combo_icon.gif)",
			"background-position":clicked.css("background-position"),
			"background-repeat":clicked.css("background-repeat")	
			});
		}
		if(inthis.$type!="multiple"){
			if(inthis.$lastSelect)	inthis.$lastSelect.removeClass("active");
			inthis.$lastSelect=clicked.parent("a").addClass("active");
			this.style.display="none";
			inthis.$select.val(clicked.attr("value"));
			inthis.$input.val(clicked.text());
		}
		else{
			clicked.parent("a").toggleClass("active");
			var optionList=inthis.$select.get(0).options;
			for(var i=0;i<optionList.length;++i){
				if(optionList[i].value==clicked.attr("value")){
					optionList[i].selected=!optionList[i].selected;
					break;
				}
			}
			inthis.$input.val(clicked.text()+" , ……");
		}
		inthis.$select.change();
		//alert(inthis.$select.val());
		return false;
	});
	//绑定当用户用鼠标上/下滑过选择列表内容时的事件
	this.$list.bind("mouseover",{list:this.$list},function(e){
		if(!e) e=window.event;
		var clicked=$(e.target);
		if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");
		else if(clicked.attr("tagName")=="UL"){
			return;
		}
		clicked.focus();
		clicked.addClass("focus");
	});
	this.$list.bind("mouseout",{list:this.$list},function(e){
		if(!e) e=window.event;
		var clicked=$(e.target);
		if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");
		else if(clicked.attr("tagName")=="UL")	return;
		clicked.removeClass("focus");
	});
	//绑定当用户用上/下方向键选择列表内容时的事件
	this.$list.bind("keydown",{inthis:this},function(e){
		if(!e) e=window.event;
		var inthis=e.data.inthis;
		if(e.keyCode==13){//回车
			if ( e && e.preventDefault )	e.preventDefault();//阻止默认浏览器动作(W3C)
			else	window.event.returnValue = false;//IE中阻止函数器默认动作的方式
			var clicked=$(e.target);
			if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");
			else if(clicked.attr("tagName")=="UL")	return;
			clicked.focus();
			clicked.click();
			return false;
		}
		else if(e.keyCode==40){
			var clicked=$(e.target);
			if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");
			else if(clicked.attr("tagName")=="UL")	return;
			var now=$(e.target);
			var next=$(e.target).next("a:eq(0)");
			if(next.length>0){
				now.removeClass("focus");
				next.addClass("focus");
				next.focus();
			}
		}
		else if(e.keyCode==38){
			var clicked=$(e.target);
			if(clicked.attr("tagName")=="P")	clicked=clicked.parent("a");
			else if(clicked.attr("tagName")=="UL")	return;
			var now=$(e.target);
			var prev=$(e.target).prev("a");
			if(prev.length>0){
				now.removeClass("focus");
				prev.addClass("focus");
				prev.focus();
			}
		}
	});
	//返回下拉框的被选值//如果是多选，则会返回一串值构成的字符串，以逗号隔开
	//此下拉框也可放在一般的FORM之中，并像普通的SELECT下拉菜单控件一样操作，当FORM提交时，后台可request获取一个被选取值的数组
	this.getValue=function(){
		return this.$select.val();
	};

	//绑定当控件中隐藏的SELECT的值变化以后,触发的方法,通过对其设置，可达到drop-on-drop的多个下拉框相互联动功能,参数Fn为要触发执行的函数
	this.bindValueChange=function(Fn){
	  this.$select.bind("change", Fn);

	};
	//删除一个选择项,index为定位参数，从0开始（即第一行的选择项）
	this.delItem=function(index){
		if(index>-1&&index<this.$data.length){
			this.$data.splice(index,1);
			this.$select.get(0).options.remove(index);
			this.$list.children("a:eq("+index+")").remove();
		}
	};
	//增加一个选择项，项,index为定位参数，从0开始（即第一行的选择项）
	this.addItem=function(index,Item){
		if(index=this.$data.length){//如果是加在最末尾
			this.$data[index]=Item;
			this.$list.append("<a href='#'><p "+(this.$haveIcon? "style='text-indent:19px;background:"+Item[2]+"' " : "")+"value='"+Item[0]+"'>"+Item[1]+"</p></a>");
		}
		else{
			this.$data.splice(index,0,Item);
			this.$list.children("a:eq("+index+")").before("<a href='#'><p "+(this.$haveIcon? "style='text-indent:19px;background:"+Item[2]+"' " : "")+"value='"+Item[0]+"'>"+Item[1]+"</p></a>");
		}
		this.$select.get(0).options.add(new Option(Item[1], Item[0]));
	};
	//清除所有选项
	this.clearItems=function(){
		this.$data=null;
		this.$data=[];
		this.$list.empty();
		this.$select.get(0).options.length=0;
		this.$select.empty();
		this.$alreadyLoad=false;
	};
}

 

//将此类的构造函数加入至JQUERY对象中
jQuery.extend({
	createGooCombo: function(dom,property) {
		return new GooCombo(dom,property);
 }
}); </pre><br>
HTML页面:(要先引入jquery 库)<br>
       $(document).ready(function () {<br>
              <br>
           //创建控件开始<br>
            var property =<br>
           {<br>
               id: "demo",<br>
               name: "demo",<br>
               type: "filter",<br>
               readOnly: false,<br>
               width: 160,<br>
               selectHeight: 140,<br>
               autoLoad: true,<br>
               haveIcon: false,<br>
               text: "可输入员工姓名查找"<br>
           }<br>
             var combo = $.createGooCombo(document.getElementById("combo"), property);<br>
             combo.loadListData(datas);<br>
             //创建控件结束<br>
})<br>
<br>
<span style="color:#FF0000">datas是由ashx一般处理文件生成二维数组的json字符串 var datas=["+jsonString+"]</span><br>
<pre name="code" class="vb"> </pre><pre name="code" class="csharp">  public string CreateJsonParameters(DataTable dt)
  {
    System.Text.StringBuilder sb = new System.Text.StringBuilder();

    if (dt != null)
    {
      for (int i = 0; i < dt.Rows.Count -1; i++)
      {
        if (i < dt.Rows.Count - 1)
        {
          sb.Append("[" + dt.Rows[i]["EmployeeID"].ToString() + ", " + dt.Rows[i]["EmployeeNameID"].ToString() + "],");
        
        }
        else if (i == dt.Rows.Count - 1)
        {
          sb.Append("[" + dt.Rows[i]["EmployeeID"].ToString() + "," + dt.Rows[i]["EmployeeNameID"].ToString() + "],");
        }
      }
    }
      
     return   sb.ToString().TrimEnd(",".ToCharArray());
  
  }</pre><br>
<br>
<br>
<br>
 
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
  
</pre></pre></pre>