自动提示 Suggest

示例

基本形式

<suggest source={source} />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: 'abandon'},
            {name: 'about'},
            {name: 'absent'},
            {name: 'bread'},
            {name: 'break'},
            {name: 'brief'},
            {name: 'calendar'},
            {name: 'cancel'},
            {name: 'column'}
        ]
    }
});

禁用某一项，禁用组件

<suggest source={source} />
<suggest source={source} disabled />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: 'abandon'},
            {name: 'about'},
            {name: 'absent（禁用）', disabled: true},
            {name: 'bread'},
            {name: 'break（禁用）', disabled: true},
            {name: 'brief'},
            {name: 'calendar'},
            {name: 'cancel（禁用）', disabled: true},
            {name: 'column'}
        ]
    }
});

Placeholder

<suggest source={source} placeholder="输入时会自动提示" />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: 'abandon'},
            {name: 'about'},
            {name: 'absent'},
            {name: 'bread'},
            {name: 'break'},
            {name: 'brief'},
            {name: 'calendar'},
            {name: 'cancel'},
            {name: 'column'}
        ]
    }
});

开始提示长度

当输入长度>=startLength属性后开始提示。

<suggest source={source} placeholder="输入2个字符后开始提示" startLength="2" />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: 'abandon'},
            {name: 'about'},
            {name: 'absent'},
            {name: 'bread'},
            {name: 'break'},
            {name: 'brief'},
            {name: 'calendar'},
            {name: 'cancel'},
            {name: 'column'}
        ]
    }
});

匹配方式

<suggest source={source} placeholder="匹配全局" matchType="all" />
<suggest source={source} placeholder="只匹配开头" matchType="start" />
<suggest source={source} placeholder="只匹配结尾" matchType="end" />

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: 'abandon'},
            {name: 'about'},
            {name: 'absent'},
            {name: 'bread'},
            {name: 'break'},
            {name: 'brief'},
            {name: 'calendar'},
            {name: 'cancel'},
            {name: 'column'}
        ]
    }
});

严格模式

当为严格模式时，value属性必须在source中选择，否则为空。

<p><suggest source={source} placeholder="非严格模式" value={value1} /> {value1}</p>
<p><suggest source={source} placeholder="严格模式" strict value={value2} /> {value2}</p>

var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: 'abandon'},
            {name: 'about'},
            {name: 'absent'},
            {name: 'bread'},
            {name: 'break'},
            {name: 'brief'},
            {name: 'calendar'},
            {name: 'cancel'},
            {name: 'column'}
        ]
    }
});

远程数据

支持远程过滤。

<suggest service={@(this.service)} />

var component = new RGUI.Component({
    template: template,
    service: {
        getList: function(params, success) {
            RGUI.ajax.request({
                url: '../data/suggest.json',
                method: 'get',
                type: 'json',
                data: params,
                success: success
            });
        }
    }
});

API

Class

Suggest

继承自Dropdown。

Options

new Suggest()

参数类型默认值数据流向描述
dataobject绑定属性
data.sourceobject[][]outer <=> inner数据源
data.source[].namestringouter => inner每项的内容
data.source[].disabledbooleanfalseouter => inner禁用此项
data.selectedobjectnullouter <=> inner当前选择项
data.valuestring''outer <=> inner文本框中的值
data.placeholderstring'请输入'outer => inner文本框的占位文字
data.maxlengthnumberouter => inner文本框的最大长度
data.startLengthnumber0outer => inner开始提示长度。当输入长度>=该值后开始提示
data.matchTypestring'all'outer => inner匹配方式，`all`表示匹配全局，`start`表示只匹配开头，`end`表示只匹配结尾
data.strictbooleanfalseouter => inner是否为严格模式。当为严格模式时，`value`属性必须在source中选择，否则为空。
data.autofocusbooleanfalseouter => inner是否自动获得焦点
data.itemTemplatestringnullouter @=> inner单项模板
data.openbooleanfalseouter <=> inner当前为展开/收起状态
data.readonlybooleanfalseouter => inner是否只读
data.disabledbooleanfalseouter => inner是否禁用
data.visiblebooleantrueouter => inner是否显示
data.classstring''outer => inner补充class
serviceobjectouter @=> inner数据服务

Methods

suggest.select(item)

选择某一项

参数类型默认值描述
itemobject选择项
返回值类型描述
无返回值

suggest.toggle(open)

展开/收起

参数类型默认值描述
openboolean展开/收起状态。如果无此参数，则在两种状态之间切换。
返回值类型描述
无返回值

Inherited Methods

@override suggest.toggle(open)

@override suggest.select(item)

@deprecated suggest.$updateSource()

从service中更新数据源

参数类型默认值描述
无参数
返回值类型描述
thisSourceComponent

Events

suggest.$on('select')

选择某一项时触发

属性类型描述
senderobject事件发送对象
selectedobject当前选择项

suggest.$on('toggle')

展开/收起时触发

属性类型描述
senderobject事件发送对象
openobject展开/收起状态

Inherited Events

@override suggest.$on('toggle')

@override suggest.$on('select')