虽然在.net中有ajaxControlToolKit的combobox。但是那个combobox实在是不给力。在网上找了很久,还是没有找到合适的combobox.于是自己封装了一个。
主要实现的功能有。
1.点击标签,显示所有数据源
2.在text中输入文本,模糊匹配。
3.配置是否必须要选择。
4.添加选中时的事件。
具体描述如下。
combobox原型属性: 原型属性主要的用途为一次设定,所有combobox的实例都可以使用
maxLength 自动搜索时,显示的最大长度,默认为所有,主要是因为搜索出来过多时,影响速率
mustSelect 必须选择,默认为false ,配置该combobox是否必须选择
fieldText 数据源的文本字段,默认为text
fieldValue 数据源的ID字段,默认为id
combobox原型方法
Init() 初始化所有combobox外观,第一个参数为jquery选择器,选择多个可以设定textbox的class,第二个参数为图片地址,
combobox属性
host 该combox对应text的选择器,如“#demo”
dataSource 数据源
defaultText combobox默认显示的值
事件
onSelected 当选择一个options时触发,参数为option的 jquery对象,如参数名为jqdom ,那么id应该是jqdom.attr(‘id’)
text应该为jqdom.text();
dataBind() 绑定combobox的数据源。
简单调用
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
></
title
>
<
link
rel
="Stylesheet"
href
="combobox/jquery.combobox.css"
/>
<
script
type
="text/javascript"
src
="combobox/jquery-1.3.2-vsdoc2.js"
></
script
>
<
script
type
="text/javascript"
src
="combobox/jquery.combobox.js"
></
script
>
<
script
type
="text/javascript"
>
$(
function
() {
//
设置该页面上所有combobox的模式
//
combobox.prototype.mustSelect = false; //必须选择参数,默认为false
//
combobox.prototype.fieldText = "text"; //设置数据源文本命名,默认为text
//
combobox.prototype.fieldValue = "id"; //设置数据源id命名,默认为id
//
combobox.prototype.maxLength = 3; //自动搜索显示20项,默认为null.即不限制
//
初始化所有combobox
//
如果有多个text要改成combobox.请在text上设置class。然后id参数使用‘.class',如 combobox.prototype.init(".demos")
combobox.prototype.init(
"
#demo
"
,
"
combobox/dropdown.gif
"
);
//
绑定
var
combo
=
new
combobox(
"
#demo
"
);
combo.dataSource
=
[{ id:
'
i1
'
, text:
'
t1
'
}, { id:
'
i2
'
, text:
'
t2
'
}, { id:
'
i3
'
, text:
'
t3
'
}, { id:
'
i4
'
, text:
'
t4
'
}, { id:
'
i5
'
, text:
'
t5
'
}];
//
combo.defaultText = "xx";//text的默认值,默认为text的value;
combo.dataBind();
});
</
script
>
</
head
>
<
body
>
<
input
type
="text"
id
="demo"
value
="ab"
/>
</
body
>
</
html
>
样式不是很好,懂得css的人调下,目前在ff,ie8中没有问题。