Kissy-combobox内置组件
1.组件地址
https://kissygalleryteam.github.io/组件名/版本号/js文件路径
http://g.tbcdn.cn/组件名/版本号/js文件路径
KISSY.config()包配置：
KISSY.config({
name:’kg’,
base:’http://g.tbcdn.cn/kg’,
ignorePackageNameInUri: true,//拼接路径时忽略包名
combine:false
});
内置组件不需要配置包，直接KISSY.use(‘组件名’,function(S,’组件名’){})
内置组件包括combobox
2.应用场景：下拉菜单，输入弹出下拉选项，传递远程数据
3.简单使用
①添加到页面单个div元素上
示例：
<div id=’gender’></div>
样式需要在线引入combobox文件包下的dpl.css，或者拷贝下来用KISSY.importStyle(包名/css文件路径)的形式通过本地加载
KISSY.use(‘conbobox’,function(S,ComboBox){
var combobox=new ComboBox({
hasTrigger:true,//有否下拉框，默认为有
render:’#gender’,//被渲染的元素节点
autoHighlightFirst:true,//自动补全框（下拉框）出现时高亮第一项内容，即“男”
value:’’,//初始时输入框显示内容
updateInputOnDownUp:true,//键盘上下按键是否将自动补全框高亮内容填充进input输入框里，默认为true
matchElWidth:true,//自动补全框和input输入框是否相同宽度，默认为true
maxItemCount:2,//最多可显示自动补全框元素的数目
width:200,
dataSource:new ComboBox.LocalDataSource({
data:[‘男’,’女’]
}),//配置静态数据
format:function (query,data) {//query输入框内容，data补全数据
var ret=[];
for (var i=0;i<data.length;i++) {
ret[i]={
content:(data[i]+’’)
.replace(new RegExp(S.escapeRegExp(query),’g’),//生成正则
i%2 ? ‘$&’:’<b>$&</b>’),//选中内容
disabled:(i%2 ? true:false)//不可用
};
};
ret[0]={disabled:true};//返回的数组ret即自动补全框填充的值，通过改写影响其中的内容
ret[0].content=’male’;
return ret;
}
/*
,palceholder:’’,//输入框提示信息，默认无？？？
,menu:{//怎样配置menu？？？
xclass:’popupmenu’,
align:{
points:[‘t1’,’b1’]
}
}
*/
});
combobox.render();//渲染
//事件
combobox.on(‘click’,function(ev){})
//函数中传入事件event作为参数，ev.target即当前项
combobox.on(‘afterCollapsedChange’,function(ev){})
//当下拉框显示或收起时触发，ev.newVal判断当前下拉菜单是否收起
//属性，通过get获取
comboboxInput=combobox.get(‘input’);
//以kissy node对象的形式返回
comboboxInput.on(‘click’,function(){
S.log(combobox.get(‘menu’));
//自动补全菜单的配置或实例，显示后为实例，即xclass
S.log(combobox.get(‘collapsed’));
//判断自动补全菜单是显示还是折叠
});
//方法
combobox.sendRequest(‘value’);//自动补全框展开，输入框填充value值
})
小结：
属性
hasTrigger:false是否有下拉箭头
placeholder:’’输入框的提示信息
autoHighlightFirst:false是否默认选中自动补全框首项，即首项高亮
menu:{}可选xclass形式的配置
dataSource{ComboBox.LocalDataSource|ComboBox.RemoteDataSource}配置静态或动态数据资源，data为数据，parse过滤或改写数据
maxItemCount自动补全框总计包含几项
matchElWidth自动补全框和输入框是否相同宽度
format格式化传入自动补全框的数据内容
updateInputOnDownUp上下按键是否将自动补全框中的内容填进输入框
value输入框显示的值
属性，通过combobox对象的get方法获取
input获取输入框，可以用kissy-node方法进行操纵
menu获取自动补全框的配置或实例，取得实例后用get(‘el’)获取自动补全框的元素，可执行添加或修改的操作
collapsed判断自动补全框折叠与否
方法，combobox对象加方法名直接调用
sendRequest()显示自动补全框
事件，通过combobox对象加on方法绑定事件
click点击触发
afterCollapsendChange()自动补全框折叠显示时触发
②html中有符合combobox结构的标签
示例：
<div class="ks-combobox" id="J_Combox" style="width:200px">
<div class="ks-combobox-trigger">
<div class="ks-combobox-trigger-inner">▼</div>
</div>
<div class="ks-combobox-input-wrap">
<input class="ks-combobox-input">
</div>
</div>
载入样式
KISSY.use("combobox", function (S, ComboBox) {
(function () {
var combobox = new ComboBox({
width:160,
srcNode:S.one("#J_Combox"),
dataSource:new ComboBox.LocalDataSource({
data:[‘男’,’女’]
})
});
combobox.render();
})();
});
③多选模式，ComboBox.MultiValueComboBox继承了ComboBox的属性、方法和事件
示例：
<div id=’combobox’></div>
引入样式
var data = [
'"a123456" <[email protected]>',
'"b12345" <[email protected]>',
'"d23434" <[email protected]>'
];
var basicComboBox = new ComboBox.MultiValueComboBox({
render:'#combobox',
separator: ',',//分割符
multiple:false,//是否允许多个值的输入，默认false，意义何在？？？
seperateType:suffix,//可取值prefix或suffix，分割符作为前缀还是后缀，默认suffix后缀，感觉效果不是很好？？？
alignWithCursor: true,//自动补全框是否和光标对齐，未见效果？？？
literal:’’,//将’’内的值看作普通字符串对待，包括分隔符，效果差强人意？？？
dataSource: new ComboBox.LocalDataSource({
data: data,
parse: function (query, data) {//不包含@gmail.com字样的data数据匹配输入框内容时，将匹配的data数据内容填入自动补全框
var ret = [‘0’];
if ( !query ){
return ret.concat(data);//输入空格的时候拼接不是完整的data数据，输入0的时候没有拼接data数据？？？
}
S.each(data, function (d) {
if (d.replace(/@gmail\.com/, "").indexOf(query) != -1) {
ret.push(d);
}
});
return ret;
}
}),
format: function (query, data) {
var ret = [];
for (var i = 0; i < data.length; i++) {
var v = data[i] + "";
if (query) {
ret[i] = {
content: S.escapeHtml(v)
.replace(new RegExp(S.escapeRegExp(query), "g"),
"<b>$&</b>")
};
} else {
ret[i] = {
content: S.escapeHtml(v)
};
}
}
ret[0] = {
disabled:true
};
if (!query) {
ret[0].content = "请输入内容";
} else {
if (data.length) {
ret[0].content = "请输入完整内容或轻敲 enter 完成输入";
} else {
ret[0].content = "轻敲空格完成输入";
}
}
return ret;
}
});
basicComboBox.render();
小结：
multiple:false是否允许多个值的输入
seperator:’,’分割符
separatorType:’suffix’默认分隔符为后缀，取分割符之前的内容进行查询，prefix为前缀
alignWidthCursor:false自动补全框是否和光标对齐
literal:’’将字符串内容当作普通字符串对待
④获取远程数据
示例：
var tmpl = "<div class='item-wrapper'>" +"<span class='item-text'>{text}</span>" +
"<span class='item-count'>约{count}个宝贝</span>" +"</div>";
var basicComboBox = new ComboBox({
prefixCls: 'search-',//类名前缀
render:'#currencyUnit',
dataSource: new ComboBox.RemoteDataSource({
xhrCfg: {//除输入内容以外传送到服务端的数据，ajax形式
url: 'http://suggest.taobao.com/sug',
dataType: 'jsonp',
data: {
k: 1,
code: "utf-8"
}
},
allowEmpty:false,//输入内容为空时是否发送请求
paramName: "q",//传送到服务端的参数名，默认为q，以输入内容为值
parse: function (query, results) {//query输入内容，results服务器返回的数据
return results.result;
},
cache: true//是否缓存服务端获得的数据
}),
format: function (query, results) {
var ret = [];
S.each(results, function (r) {
var item = {
textContent: r[0],//textContent匹配输入内容，content显示
content: S.substitute(tmpl, {//模板填充？？？
text: r[0],
count: r[1]
})
};
ret.push(item);
});
return ret;
}
});
basicComboBox.render();
var html = '<div class="item-wrapper tdg-box">' +
'<form method="get" action="http://s.taobao.com/search" class="clearfix">' +
'<input type="hidden" class="tdg-query" name="q" value="gs">' +
'<input type="hidden" value="tdg1" name="from"><h5>同店购：</h5>' +
'<input type="text" value="gs" class="tdg-input" tabindex="0"' +
' placeholder="第一件宝贝"><em>+</em>' +
'<input type="text" value="" class="tdg-input" ' +
'tabindex="1" placeholder="另一宝贝"><em>+</em>' +
'<input type="text" value="" class="tdg-input" tabindex="2"' +
' placeholder="另一宝贝">' +
'<button class="tdg-btn" type="submit" ' +
'tabindex="3">搜索</button></form></div>';
basicComboBox.on("afterCollapsedChange", function (e) {
var self = this;
if (!e.newVal) {
var menu = self.get('menu');
var menuEl = menu.get('el'), footer;//获取自动补全框中的元素进行修改
if (!(footer = menuEl.one(".search-combobox-menu-footer"))) {
footer = new S.Node("<div class='search-combobox-menu-footer'></div> ")
.appendTo(menuEl);
}
if (!footer.children().length) {
footer.append(html);
}
footer.one(".tdg-input").val(basicComboBox.get('input').val())
}
});
小结
paramName发送到服务的参数名，以输入框内容为值
parse:function(query,results)过滤或修改数据
allowEmpty输入内容为空时是否发送请求
cache是否缓存
xhrCfg传送到后台的其他数据
<!--[if !supportLists]-->3.<!--[endif]-->作为工具方法添加到util.js模块中
①手动书写KISSY.add函数
KISSY..add('cms/util’,[‘combobox’],function(S ,require, exports, module) {
var ComboBox=require(‘combobox’)
var combobox=function (ele,dat,wid,boo){
S.use(‘combobox’,function(S,ComboBox){
if ( boo==undefined ) boo=true;
if ( !KISSY.isString(dat) ){
var comboBox=new ComboBox({
hasTrigger:boo,
value:dat[0],
autoHighlightFirst:true,
render:ele,
width:(wid||136),
dataSource:new ComboBox.LocalDataSource({
data:dat
})
})
}else{
var comboBox=new ComboBox({
render:ele,
width:(wid||136),
dataSource:new ComboBox.LocalDataSource({
xhrCfg:{
url:dat,
dataType:'jsonp',
data:arguments[2]
},
parse:function(query,results){
return results.result;
},
cache:true
})
})
}
comboBox.render();
return comboBox;
})
}
module.exports.combobox=combobox;
});
②使用gulp-kmc工具自动书写KISSY.add函数，不能载入请求的combobox模块
var ComboBox=require('combobox')
var combobox=function (ele,dat,wid,boo){
if ( boo==undefined ) boo=true;
if ( !KISSY.isString(dat) ){
var comboBox=new ComboBox({
hasTrigger:boo,
value:dat[0],
autoHighlightFirst:true,
render:ele,
width:(wid||136),
dataSource:new ComboBox.LocalDataSource({
data:dat
})
})
}else{
var comboBox=new ComboBox({
render:ele,
width:(wid||136),
dataSource:new ComboBox.LocalDataSource({
xhrCfg:{
url:dat,
dataType:'jsonp',
data:arguments[2]
},
parse:function(query,results){
return results.result;
},
cache:true
})
})
}
comboBox.render();
return comboBox;
}
module.exports.combobox=combobox;