Navigation

Suggest

提示补全, 支持如下功能：
- 完全跨域
- cache 功能
- 支持键盘控制：上下选择及回车后直接提交, ESC 键关闭
- 支持鼠标控制：鼠标选择和点击提交功能
- 支持匹配文字加亮
- 动画效果
- 在提示层中显示第一个搜索结果
- 整合本地表单的提示记录
- 关键词的模糊匹配提示功能
- 自定义提示Dom渲染
- 支持本地数据

Class

Class Detail

class suggest.Suggest
Suggest (textInput, dataSource[, config])
Parameters:
  • textInput (String|HTMLElement) – 输入框.
  • dataSource (String|Array<Object>) – 获取提示的数据源, 可为远程URL, 或本地数据.
  • config (Object) – 配置项, 详细见下方 Config Attributes Detail .

提示层的默认HTML结构如下：

<div class='ks-suggest-container {containerCls}'>
    <ol class="ks-suggest-content">
        <li>
            <span class='ks-suggest-key'>...</span>
            <span class='ks-suggest-result'>...</span>
        </li>
    </ol>
    <div class='ks-suggest-footer'>
        <a class='ks-suggest-close-btn'>...</a>
    </div>
</div>

Config Attributes Detail

suggest.containerCls

{String} - 用户附加给悬浮提示层的 class.

suggest.containerWidth

{String} - 默认为和input等宽. 提示层的宽度, 必须带单位, 如‘200px’, ‘10%’ 等.

suggest.resultFormat

{String} - 默认为 ‘%result%’ , result 的格式.

suggest.closeBtn

{Boolean} - 默认为 false, 是否显示关闭按钮.

suggest.closeBtnText

{String} - 默认为 ‘关闭’, 关闭按钮上的文字.

suggest.shim

{Boolean} - 是否需要 iframe shim 默认只在 ie6 下显示.

suggest.autoFocus

{Boolean} - 默认为 false , 初始化后, 自动激活.

suggest.submitOnSelect

{Boolean} - 默认为 true , 选择某项时, 是否自动提交表单.

suggest.offset

{Number} - 默认为 -1 , 提示悬浮层和输入框的垂直偏离. 默认向上偏差 1px, 使得悬浮层刚好覆盖输入框的下边框.

suggest.charset

{String} - 默认为 ‘utf-8’ , 数据接口返回数据的编码.

suggest.callbackName

{String} - 默认为 ‘callback’ , 回调函数的参数名.

suggest.callbackFn

{String} - 默认为 ‘KISSY.Suggest.callback’ , 回调函数的函数名

suggest.queryName

{String} - 默认为 ‘q’ , 查询的参数名

suggest.dataType
{Number} - 默认为 0 , 数据源标志, 默认为 0 , 可取 0, 1, 2
    • 0: 数据来自远程, 且请求回来后存入 _dataCache
    • 1: 数据来自远程, 且不存入 _dataCache, 每次请求的数据是否需要缓存, 防止在公用同一个 suggest , 但数据源不一样时, 出现相同内容
    • 2: 数据来自静态, 不存在时, 不显示提示浮层
suggest.contentRender

{Function} - 默认为 null , 提示层内容渲染器. 该渲染器以返回的data为唯一参数, 且返回渲染的内容,可选项要求由”li”标签包裹, 并将用于表单提交的值存储在”li”元素的key属性上.

Properties Detail

suggest.textInput

{HTMLElement} - 文本输入框.

suggest.config

{Object} - 配置参数.

suggest.dataSource

{String | Object} - 数据源.

suggest.returnedData

{Object} - 通过 jsonp 返回的数据.

suggest.container

{HTMLElement} - 存放提示信息的容器.

suggest.content

{HTMLElement} - 存放提示信息的内容部分容器.

suggest.footer

{HTMLElement} - 存放提示信息的额外内容容器.

suggest.query

{String} - 输入框的值.

suggest.queryParams

{String} - 获取数据时的参数.

suggest.dataScript

{HTMLElement} - 获取数据的 script 元素.

suggest.selectedItem

{HTMLElement} - 提示层的当前选中项.

Methods Detail

suggest.start()
start ()
启动计时器, 开始监听用户输入.
suggest.stop()
stop ()
停止计时器.
suggest.show()
show ()
显示提示层.
suggest.hide()
hide ()
隐藏提示层.
suggest.isVisible()
isVisible ()
提示层是否显示.
Returns:返回true表示处于显示状态, 否则处于隐藏状态.

Events Detail

suggest.beforeStart()
beforeStart ( )
监控计时器开始前触发, 可以用来做条件触发. 注册的事件可反回Boolean值来确定事件是否生效.
suggest.itemSelect()
itemSelect ( )
选中某项时触发, 可以用来添加监控埋点等参数. 注册的事件可反回Boolean值来确定事件是否生效.
suggest.beforeSubmit()
beforeSubmit ( ev )
表单提交前触发, 可以用来取消提交或添加特定参数.
Parameters:ev.form (Object) – 所在的表单. 注册的事件可反回Boolean值来确定事件是否生效.
suggest.beforeDataRequest()
beforeDataRequest ( )
请求数据前触发, 可以用来动态修改请求 url 和参数. 注册的事件可反回Boolean值来确定事件是否生效.
suggest.dataReturn()
dataReturn ( ev )
获得返回数据时触发, 可以用来动态修正数据.
Parameters:ev.data (Object) – 返回的数据. 注册的事件可反回Boolean值来确定事件是否生效.
suggest.updateFooter()
updateFooter ( ev )
更新底部内容时触发, 可以用来动态添加自定义内容.
Parameters:
  • ev.footer (Object) – 即 footer .
  • ev.query (Object) – 即 query .
suggest.beforeShow()
beforeShow ( )
显示提示层前触发, 可以用来动态修改提示层数据. 注册的事件可反回Boolean值来确定事件是否生效.

Navigation