Combo - ChinaSS/Util GitHub Wiki

#Combo Combo组件是下拉选择（联合）组件的基础组件。

代码样例

###html

<input id="combo" type="text" />

###javascript

require(["combo"], function(Combo){
    //初始化
        var combo = Combo({
            //要渲染的input的id
            id : "combo1",
            //下拉框的类型：单选or多选
            multi : true,
            key: {
            	idKey: "id",
            	textKey: "name"
            },
            placeholder: "请选择……",
            event: {
            	onShowPanel: function(){
                	console.log("show");
                },
                onHidePanel: function() {
                	console.log("hide");
                },
                onChange: function(n, o) {
                	console.log(n);
                	console.log(o);
                },
                onRemove: function(v) {
                	console.log("on remove");
                },
                onClear: function() {
                	console.log("on clear");
                }
            }
        });

        combo.setValue([{
	           	id: "001",
	           	name: "001"
        	},{
	           	id: "002",
	           	name: "002"
        	},{
	           	id: "003",
	           	name: "003"
		}]);
})

option

| 属性名称 | 属性类型 | 是否必填 | 默认值 | 说明 |:---:| :---: | :---: | :---: |:-----------------------------------:|:----:| |id | string | 是 | |input的id属性 | |multi | boolean | | false | 单选还是多选 | |readonly | boolean | | false | 设置readonly（当input带有readonly属性时为true) | |placeholder | string | | | 当未选择任何值时的文字提示 | |key | object | | { idKey: "id", textKey: "name"} | 设置id和text的映射字段 | |event | object | | | 请参考下面的event对象 | |panelWidth | number | | | 下拉框宽度，未指定值时跟input的宽度保持一致 | |panelMinWidth | number | | | 下拉框最小宽度，未指定值时跟input的宽度保持一致 | |panelMaxWidth | number | | | 下拉框最大宽度，未指定值时跟input的宽度保持一致 | |panelHeight | number | | | 下拉框高度 | |panelMinHeight | number | | 100 | 下拉框最小高度 | |panelMaxHeight | number | | 260 | 下拉框最大高度 |

event

事件名称	参数	说明
onShowPanel		下拉框显示时回调
onHidePanel		下拉框关闭时回调
onChange	n, o	选项发生改变时回调,n表示新值，o表示旧值
onRemove	value	删除某一选项时回调，value表示要删除的值
onClear		清空所有选项时回调

method

方法名称	参数	说明
showPanel		显示下拉框
hidePanel		关闭下拉框
getPanel		返回下拉框jq对象
setValue	[]	设置选项 comboObj.setValue([ { "id": "001", "name": "001" }, { "id": "002", "name": "002" } ])
getValue		返回选项
clear		清空选项