下拉分页控件 支持下拉，分页，键盘操作等功能

基本初始化 

//表单声明元素
<input type="text" id="comboSelect" class="input-block-level" >
//定义数组，在服务端返回的数据也以该格式返回：Array[{Object},{...}]
var tag_data = [
	{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
	{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
	{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
	{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//showField：设置下拉列表中显示文本的列
//keyField：设置下拉列表项目中项目的KEY值，用于提交表单
//data：数据源，可以是JSON数据格式，也可以是URL
//callback：选中项目后的回调函数
$('#comboSelect').bComboSelect({
	showField : 'desc',
	keyField : 'id',
	data : tag_data
});
]]>

设置初始化选中项目 以及请求参数传递等……

//data-init：设置列表初始被选中的项目，传递值为keyField对应的内容
<input type="text" id="comboSelect1" data-init="4" >
$('#comboSelect').bComboSelect({
	showField : 'desc',
	keyField : 'id',
	data : '/sys/userinfo',
	params : function(){return {'name':'aa','sex':1};}
});

项目显示文本自定义 允许根据现有数据字段进行自由组合

<input type="text" id="comboSelect" class="input-xlarge" >
$('#comboSelect').bComboSelect({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	//格式化显示项目，提供源数据进行使用
	formatItem : function(data){
		return data.desc + '(' + data.name + ')';
	}
});

多项选择模式 

<input type="text" id="comboSelect" class="input-block-level" >
$('#comboSelect').bComboSelect({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	//启用多选模式
	multiple : true
});

事件回调处理 项目选中后，触发的事件处理

<input type="text" id="comboSelect" class="input-block-level" >
$('#comboSelect').bComboSelect({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	multiple : true,
	//选中项目后的回调处理
	//入参：data：选中行的原始数据对象
	callback : function(data){
		$('#callbackLog').append(data.desc + '(' + data.name + ')<br/>');
	}
});

来源：门卓网

转载请注明出处，此代码仅供学习交流，请勿用于商业用途。