自动提示 Suggest

示例

基本形式

<suggest>
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread">bread</item>
    <item value="break">break</item>
    <item value="brief">brief</item>
    <item value="calendar">calendar</item>
    <item value="cancel">cancel</item>
    <item value="column">column</item>
</suggest>

文本框属性

<suggest maxlength="6" placeholder="输入时会自动提示">
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread">bread</item>
    <item value="break">break</item>
    <item value="brief">brief</item>
    <item value="calendar">calendar</item>
    <item value="cancel">cancel</item>
    <item value="column">column</item>
</suggest>

只读，禁用，禁用某一项

<suggest readonly placeholder="只读">
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread">bread</item>
</suggest>
<suggest disabled placeholder="禁用">
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread">bread</item>
</suggest>
<suggest placeholder="禁用某一项">
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread" disabled>bread</item>
</suggest>

开始提示位置

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

<suggest startAt="2" placeholder="2字符后开始提示">
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread">bread</item>
    <item value="break">break</item>
    <item value="brief">brief</item>
    <item value="calendar">calendar</item>
    <item value="cancel">cancel</item>
    <item value="column">column</item>
</suggest>

匹配方式

<suggest matchType="includes" placeholder="包括即可（默认）">
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread">bread</item>
    <item value="break">break</item>
    <item value="brief">brief</item>
    <item value="calendar">calendar</item>
    <item value="cancel">cancel</item>
    <item value="column">column</item>
</suggest>
<suggest matchType="startsWith" placeholder="只匹配开头">
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread">bread</item>
    <item value="break">break</item>
    <item value="brief">brief</item>
    <item value="calendar">calendar</item>
    <item value="cancel">cancel</item>
    <item value="column">column</item>
</suggest>
<suggest matchType="endsWith" placeholder="只匹配结尾">
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread">bread</item>
    <item value="break">break</item>
    <item value="brief">brief</item>
    <item value="calendar">calendar</item>
    <item value="cancel">cancel</item>
    <item value="column">column</item>
</suggest>

严格模式

当为严格模式时，value属性必须为一个选项的值，否则为空。

<suggest placeholder="非严格模式（默认）">
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread">bread</item>
    <item value="break">break</item>
    <item value="brief">brief</item>
    <item value="calendar">calendar</item>
    <item value="cancel">cancel</item>
    <item value="column">column</item>
</suggest>
<suggest strict placeholder="严格模式">
    <item value="abandon">abandon</item>
    <item value="about">about</item>
    <item value="absent">absent</item>
    <item value="bread">bread</item>
    <item value="break">break</item>
    <item value="brief">brief</item>
    <item value="calendar">calendar</item>
    <item value="cancel">cancel</item>
    <item value="column">column</item>
</suggest>

API

Class

Suggest

继承自ListView。

Options

new Suggest()

参数	类型	默认值	数据流向	描述
`data`	object			绑定属性
`data.value`	string	`''`	outside <=> inside	文本框的值
`data.type`	string	`''`	outside => inside	文本框的类型
`data.size`	string	`''`	outside <=> inside	文本框的尺寸
`data.state`	string	`''`	outside <=> inside	文本框的状态
`data.tip`	string	`''`	outside <=> inside	小贴示
`data.rules`	object[]	`[]`	outside => inside	验证规则集
`data.placeholder`	string	`'请输入'`	outside => inside	文本框的占位文字
`data.maxlength`	number		outside => inside	文本框的最大长度
`data.autofocus`	boolean	`false`	outside => inside	是否自动获得焦点
`data.startAt`	number	`0`	outside => inside	开始提示位置。当输入长度>=该值后开始提示
`data.matchType`	string	`'includes'`	outside => inside	匹配方式，`includes`表示包含即可，`startsWith`表示只匹配开头，`endsWith`表示只匹配结尾
`data.strict`	boolean	`false`	outside => inside	是否为严格模式。当为严格模式时，`value`属性必须为一个选项的值，否则为空。
`data.open`	boolean	`false`	outside <=> inside	当前为展开/收起状态
`data.direction`	string	`'bottom-left'`	outside => inside	展开方向
`data.readonly`	boolean	`false`	outside => inside	是否只读
`data.disabled`	boolean	`false`	outside => inside	是否禁用
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`''`	outside => inside	补充class

Methods

suggest.select(item)

选择某一项

参数	类型	默认值	描述
`item`	Item		选择项
返回值	类型	描述
无返回值

Events

suggest.$on('change')

文本框的值改变时触发

属性	类型	描述
`sender`	object	事件发送对象
`value`	var	改变后的值

suggest.$on('select')

选择某一项时触发

属性	类型	描述
`sender`	object	事件发送对象
`selected`	Item	当前选择项
`value`	var	当前选择值

suggest.$on('toggle')

展开/收起时触发

属性	类型	描述
`sender`	object	事件发送对象
`open`	boolean	展开/收起状态
`direction`	string	展开方向