jquery combobox
88324358 2016-03-18
from: http://www.cnblogs.com/xinjian/archive/2011/03/02/1968955.html
从网上找到，有例子，他写的是.net的我添加一个java的。
在网上找了很久，还是没有找到合适的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> 