kissy使用小结（3）内置组件combobox

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" <[e-mail]>',

        '"b12345" <[e-mail]>',

        '[e-mail]',

        '"d23434" <[e-mail]>'

    ];

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;