ComboBox

复合输入框.
KISSY.use('combobox',function(S,ComboBox){
    // use ComboBox
});

Class

Attributes

Methods

Class Detail

class combobox.ComboBox
ComboBox (config)
  • 继承自 Control , 包含其全部配置,属性,方法,事件.
Parameters:config (Object) – 配置项.

Note

从已有元素实例 ComboBox 对象时:

  1. 元素节点标明类名 {prefixCls}combobox .
  2. html 符合一定规范,例如
<div class="ks-combobox" id="combobox">
    <div class="ks-combobox-input-wrap">
        <input style="width:100%;height:100%;" aria-haspopup="true"
               aria-combobox="list" role="combobox" combobox="off"
               class="ks-combobox-input" tabindex="0"
               id="inp"
                />
    </div>
</div>

Note

使用前请加上初始样式

<style>
    .ks-popupmenu {
        position:absolute;
        left:-9999px;
        top:-9999px;
    }
</style>

Configs Detail

ComboBox.config.hasTrigger

{Boolean} - 默认 true. 是否显示下拉按钮.

ComboBox.config.placeholder

{String} - 默认无. 输入框的提示信息.

ComboBox.config.autoHighlightFirst

{Boolean} - 默认 false. 是否默认选中下拉提示第一项

ComboBox.config.menu

{Object|Menu.PopupMenu} - 可选. xclass 形式的配置,例如指定特定的 align:

{
    xclass:'popupmenu',
    align:{
        points:['tl','bl']
    }
}
ComboBox.config.dataSource
{ComboBox.LocalDataSource|ComboBox.RemoteDataSource} - 数据源配置
例如静态数据源的配置:
new ComboBox.LocalDataSource({
    data:["abc","123"]
})
ComboBox.config.maxItemCount

{Number} - 最多可显示的下拉菜单个数

ComboBox.config.matchElWidth

{Boolean} - 是否下拉菜单和自动补全框宽度一致。默认 true.

ComboBox.config.format

{Function} - 可选。自定义下拉菜单属性的函数,传入参数 query(自动补全框当前值) , data(匹配数据数组)。 返回对象数组,其中对象的 content 属性表示菜单项显示内容,textContent 表示放入到自动补全框的内容,disabled 表示当前项是否被禁用.

例如高亮的处理:

{
    format:function(query, data){
        var ret = [];
        for (var i = 0; i < data.length; i++) {
            ret[i] = {
                content:(data[i] + "")
                        .replace(new RegExp(S.escapeRegExp(query), "g"),
                        "<b>$&</b>")
            };
        }
        return ret;
    }
}
ComboBox.config.updateInputOnDownUp

{Boolean} - 默认 true. 上下键是否导致高亮项填充入自动补全框.

ComboBox.config.autoHighlightFirst

{String} - 默认 false. 是否当自动补全菜单出现时高亮第一项.

Attributes Detail

ComboBox.prototype.input

{KISSY.Node} - 关联的复合输入框.

ComboBox.prototype.menu

{ComboBox.Menu|Object} - 自动补全菜单的配置(在显示后转换为实例)或实例.

ComboBox.prototype.collapsed

{Boolean} - 自动补全菜单是否已经收起.

Methods Detail

ComboBox.prototype.sendRequest()
sendRequest( value )
根据 value 自动补全并显示下拉菜单.
Parameters:value (String) – 自动补全的值

Events Detail

ComboBox.Events.click()
click(e)
当用户选择自动补全下拉框内的项时触发
Parameters:e.target ({MenuItem}) – 选择的下拉菜单项
ComboBox.Events.afterCollapsedChange()
afterCollapsedChange(e)
当下拉菜单显示或收起时触发
Parameters:e.newVal ({Boolean}) – 当前下拉菜单是否是收起状态