Searchlist 搜索列表 1.0.2
resizable { Boolean } #
是否可调整大小，默认为true
filter { Function } #
自定义的过滤函数，默认为null，使用内置过滤函数
filterBy { Array } #
过滤数据的字段，默认为['value']
modal { Boolean } #
是否启用独占的模态框模式，默认为false
async { Boolean } #
是否异步加载数据，默认为false，
resultActiveClass { String } #
搜索结果被点击时的样式，默认为空
resultScrollLock { Boolean } #
当数据项少于一屏时，是否锁定不允许滚动，默认为false，允许滚动
suggestTpl { String } #
suggest的组件的模板
resultListTpl { String } #
搜索结果模板
resultItemTpl { String } #
搜索结果选项模板
enableNoDataTpl { Boolean } #
是否允许使用没有数据的模板，默认为false
nodataTpl { String } #
没有结果的模板，需要设置enableNoDataTpl为true
groupBy { String } #
根据数据中的哪个字段分组进行分组，必填
notgroupData { Array } #
没有分组的数据，默认展示在顶部
previousData { Array } #
前置分组的数据，在未分组数据和分组数据之间
isTransition { Boolean } #
默认滚动的动画效果，默认为false，true使用css的transition，false使用js动画
lazyload { Boolean } #
是否延迟加载数据，默认为false，开启后先加载20条，然后在加载其余数据
template { String } #
组件的外层模板，自定义模板时，需要传值
itemTpl { String } #
组件分组数据模板，自定义模板时，需要传值
stickyTpl { String } #
磁贴字母模板
hasIndexList { Boolean } #
是否显示右侧字母索引列表，默认为true
indexlistTpl { String } #
右侧索引字母模板
groupTitleRender { Function } #
渲染分组数据title的渲染函数，默认取第一个字符
render #
将组件渲染到document中
reload #
重新设置组件的数据
方法参数:
| 参数名 | 类型 | 描述 | 必选 | 支持版本 |
|---|---|---|---|---|
| ds | Array | 搜索框组件以及分组列表的数据 |
getSuggestInputEl #
获取suggest内部的input元素
返回值: HTMLElement 组件内部的input元素
setPreviousData #
设置分组列表的前置数据
方法参数:
| 参数名 | 类型 | 描述 | 必选 | 支持版本 |
|---|---|---|---|---|
| data | Array | 分组列表的前置数据 |
resize #
根据窗口大小重新调整组件位置和大小
selectfilteritem #
用户点击搜索结果时触发的事件
方法参数:
| 参数名 | 类型 | 描述 | 必选 | 支持版本 |
|---|---|---|---|---|
| data | Object | 点击的搜索结果条目对应的数据 |
selectitem #
用户选择某项数据时触发的事件
方法参数:
| 参数名 | 类型 | 描述 | 必选 | 支持版本 |
|---|---|---|---|---|
| data | Object | 当前选择项目的数据 | ||
| itemEl | HTMLElement | 当前选择项目的节点 | ||
| targetEl | HTMLElement | 用户点击的实际节点 |
changevalue #
搜索值改变时触发的事件
方法参数:
| 参数名 | 类型 | 描述 | 必选 | 支持版本 |
|---|---|---|---|---|
| newVal | String | 搜索的新值 | ||
| oldVal | String | 搜索的老值 |