Nui.js
搜索
先睹为快
选项参数
# url
功能：请求url
默认：''
类型：{String}
# zIndex
功能：设置层级
默认：19920604
类型：{Number}
说明：若style中已经设置，则不使用该值
# query
功能：设置查询参数
默认：'keyword'
类型：{String}
类型：{Function}
参数：self {Object} 组件实例对象
参数：value {String} 文本框输入值
返回：{Object} 查询参数对象集合
# item
功能：定义列表模版
默认：''
类型：{String}
类型：{Function}
参数：self {Object} 组件实例对象
返回：{String} 返回列表模版
说明：模版中可以使用<%$data%>获取当前行数据，<%$index%>获取当前行索引； 配合选项参数selected方法在模版中类名中加入<%selected($data)%>可以设置当前行是否选中； 模版中有效列表类名必须包含con-search-item以及data-index="<%$index%>"属性
# empty
功能：定义提示信息模版
默认：''
类型：{String}
类型：{Function}
参数：self {Object} 组件实例对象
返回：{String} 返回空数据时模版
说明：模版中可以使用<%value%>获取当前输入值
# prompt
功能：定义输入时有结果返回提示模版
默认：''
类型：{String}
类型：{Function}
参数：self {Object} 组件实例对象
返回：{String} 返回提示模版
# foot
功能：定义底部模版
默认：''
类型：{String}
类型：{Function}
参数：self {Object} 组件实例对象
返回：{String} 返回底部模版
# field
功能：设置列表展示内容字段名
默认：''
类型：{String}
说明：在展示列表时如果未使用item参数，将会展示该值内容
# focus
功能：是否在文本获取焦点时展示下拉
默认：false
类型：{Boolean}
说明：设置true后组件内部会绑定focus事件，因此不建议手动绑定focus事件调用组件的同时将该参数设置为true，那样会导致事件重复绑定
# nullable
功能：是否允许文本框内容为空时展示下拉
默认：false
类型：{Boolean}
# cahce
功能：搜索时是否缓存数据
默认：false
类型：{Boolean}
说明：设置为true后，如果输入之前已经查询过的数据，那么不再执行查询，直接返回该数据
# container
功能：展示内容显示容器
默认：'body'
类型：{String} 选择器
类型：{Object} DOM对象、jQuery对象
类型：{Function}
参数：self {Object} 组件实例对象
返回：{String, Object} 返回选择器或者元素对象
说明：如果设置为body，创建的元素会基于搜索输入框进行定位，如果不是则基于该值定义的元素进行定位
# limit
功能：下拉列表的数量，超过出现滚动条
默认：6
类型：{Number}
# size
功能：为展示元素增加高宽
默认：null
类型：{Object}
属性：width {Number} 宽度
属性：height {Number} 高度
# offset
功能：设置展示元素的偏移值
默认：null
类型：{Object}
属性：top {Number} 顶部偏移值
属性：left {Number} 左侧偏移值
# style
功能：设置组件元素样式
默认：null
类型：{Object}
# ajax
功能：jQuery ajax配置
默认：null
类型：{Object}
# data
功能：自定义列表数据
默认：null
类型：{Array}
类型：{Function}
参数：self {Object} 组件实例对象
返回：{Array} 返回自定义数据
# tag
功能：展示标签配置项
类型：{Object}
| 属性 | 默认值 | 类型 | 说明 |
|---|---|---|---|
| type | '' | {String, Array} | 定义标签类型，设置后会在标签元素上增加类名ui-tag-名称 |
| close | '×' | {String} | 关闭按钮内容 |
| multiple | false | {Boolean} | 是否多选 |
| backspace | false | {Boolean} | 是否可以用退格键删除标签 |
| focus | false | {Boolean} | 点击叉号删除标签时是否使输入框获取焦点 |
| clear | false | {Boolean} | 选择完是否清空输入框，只有多选时才会启用 |
| title | true | {Boolean} | 鼠标悬停在标签上是否有提示 |
| container | null | {DOM, jQuery Object, Selector, Function} | 标签填充容器，该属性必填 |
| scroll | null | {DOM, jQuery Object, Selector, Function} | 设置滚动容器，未设置时默认取container属性 |
| getData | null | {Function} | 该方法会在标签元素遍历时执行，设置已选择的标签数据，存储在实例属性tagData中，返回对象必须包含text属性 |
| deleteMatch | null | {DOM, jQuery Object, Selector} | 检测已选中的标签是否可以删除 |
# tabs
功能：设置多菜单
默认：null
类型：{Array}
| 属性 | 默认值 | 类型 | 说明 |
|---|---|---|---|
| title | '' | {String} | 菜单标题 |
| content | '' | {String, Function} | 菜单内容 |
| onShow | null | {Function} | 菜单选中状态时回调 |
# match
功能：过滤数据
默认：null
类型：{Array, Object}
说明：该参数仅在使用自定义数据时才会启用,与filter参数互斥，优先使用filter
| 属性 | 默认值 | 类型 | 说明 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| field | '' | {String} | 匹配字段名 | ||||||||
| like | '' |
|
|||||||||
# setValue
功能：定义搜索列表选中数据
默认：null 默认取field参数获取的值
类型：{Function}
参数：self {Object} 组件实例对象
参数：data {Object} 当前选中行数据
返回：{String, Object} 如果选中后以标签展示，并且需要在标签中设置隐藏域，返回值必须是对象，必须包含text、fields属性
# selected
功能：检测列表是否被选中
默认：null
类型：{Function}
参数：self {Object} 组件实例对象
参数：data {Object} 列表一行数据
返回：{Boolean} 返回true表示被选中，列表class属性值会增加s-crt类
# filter
功能：过滤数据
默认：null
类型：{Function}
参数：self {Object} 组件实例对象
参数：data {Object} 列表数据
参数：value {String} 当前输入框的值
返回：{Array} 返回过滤后的新数据
说明：该参数仅在使用自定义数据时才会启用，与match参数互斥，优先使用该参数
# exist
功能：输入框失去焦点时校验内容是否存在
默认：null
类型：{Boolean} 为true时默认取field参数对应的字段
类型：{Function}
参数：self {Object} 组件实例对象
参数：data {Object} 遍历的列表一行数据
参数：value {String} 当前输入框的值
返回：{Boolean} 返回true则表示数据匹配
说明：仅在单选功能才会启用
# onResponse
功能：请求返回数据时触发回调
默认：null
类型：{Function}
参数：self {Object} 组件实例对象
参数：data {Anything} 接口返回数据
返回：{Array} 返回列表数据
# onSelectBefore
功能：选中列表前触发回调
默认：null
类型：{Function}
参数：self {Object} 组件实例对象
参数：data {Object} 选中项数据
参数：event {Object} 事件对象
参数：elem {Object} 选中项jQuery对象
返回：{Boolean} 返回false则不会触发setValue以及onSelect
# onSelect
功能：选中列表后触发回调
默认：null
类型：{Function}
参数：self {Object} 组件实例对象
参数：data {Object} 选中项数据
参数：event {Object} 事件对象
参数：elem {Object} 选中项jQuery对象
# onBlur
功能：输入框失焦后触发
默认：null
类型：{Function}
参数：self {Object} 组件实例对象
参数：data {Object} exist参数启用时该参数才存在，表示已选中数据
说明：不建议手动给元素绑定blur事件，应该使用该参数
# onChange
功能：改变选中值后触发回调
默认：null
类型：{Function}
参数：self {Object} 组件实例对象
参数：event {Object} 事件对象，当手动删除标签时才会有该参数
实例属性
# target
功能：调用组件的对象
类型：{jQuery Object}
# element
功能：组件元素对象
类型：{jQuery Object}
# container
功能：展示列表所在容器对象
类型：{jQuery Object}
# $result
功能：搜索列表容器对象
类型：{jQuery Object}
# $list
功能：搜索列表对象，没有搜到内容时该值不存在
类型：{jQuery Object}
# $tags
功能：选中的标签元素对象
类型：{jQuery Object}
# tagData
功能：选中的标签数据集合
类型：{Array}
# activeTab
功能：当前选中状态菜单数据
类型：{Object}
# data
功能：选项参数data中获取的数据
类型：{Array}
# queryData
功能：查询后的结果数据
类型：{Array}
实例方法
# resize
功能：重新计算组件元素的位置
类型：{Function}
# show
功能：显示组件元素
类型：{Function}
# hide
功能：隐藏组件元素
类型：{Function}
# value
功能：填充文本框内容或者添加tag标签
类型：{Function}
参数：data {String} 设置文本框内容
参数：data {Object, Array} 添加tag标签，对象必须包含text属性，如果需要给标签添加隐藏域则必须包含fields属性；值为null时会清空标签或者文本框内容
参数：add {Boolean} 如果为false则不会添加标签
类方法
# data2html
功能：将tag数据转为html模版
类型：{Function}
参数：data {String, Object, Array} 为对象类型时必须包含text属性，如果需要给标签添加隐藏域则必须包含fields属性
参数：option {Object} 属性包含title、close、type，说明请参考选项参数tag
方法输出：