Retrieval检索模块

2024-07-06 22:38:51首发，7个月前更新

Retrieval根据关键字对数据进行检索并生成相应的节点，可自动或手动的填充目标节点，可自定义模版字符串和模板引擎；以arrSearch工具函数为核心的数据检索模块，是其他搜索列表的基础模块

ax.Retrieval检索模块(模糊检索class类)详细使用方法和诸多示例 需7金币3个月前更新 Retrieval检索模块7个月前更新

一般内容格式

参数content接受检索数据来源，最基本的数据便是同arrSearch工具函数中source对应的数据类型。

输出
HTML
JS

```
                
                
            
```

                
                let ins01 = new ax.Retrieval({
                        keys:'c',
                        content:['United States','Canada','United Kingdom','China','Brazil','India','France','Germany']
                    }),
                    ins02 = new ax.Retrieval({
                        keys:'a',
                        content:[
                            {label:'United States'},
                            {label:'Canada'},
                            {label:'United Kingdom'},
                            {lablel:'China'},
                            {label:'Brazil'},
                            {label:'India'},
                            {label:'France'},
                            {label:'Germany'}
                            ]
                    }),
                    contbox=document.querySelector('#contbox');
                contbtn01.onclick=()=>{
                    console.log(ins01.output);
                    contbox.innerHTML = `检索结果是：${ins01.output.map(k=>k.source.label)}`
                }
                contbtn02.onclick=()=>{
                    console.log(ins02.output);
                    contbox.innerHTML = `检索结果是：${ins02.output.map(k=>k.source.label)}`
                }

内容是普通函数

参数content允许是普通函数，但是返回结果应该符合arrSearch工具函数中source要求的数据格式。

输出
HTML
JS

```
                
                
            
```

                
                let fn=()=>{
                    return 'United States,Canada,United Kingdom,China,Brazil,India,France,Germany';
                },
                    ins = new ax.Retrieval({
                        keys:'c',
                        content:fn,
                    }),
                    fnbox=document.querySelector('#fnbox');
                fnbtn.onclick=()=>{
                    console.log(ins.output);
                    fnbox.innerHTML = `检索结果是：${ins.output.map(k=>k.source.label)}`
                }

检索基础配置

属性	类型	默认值	说明
keys	string	''	检索关键字
props	string	'label'	检索属性
fuzzy	boolean	true	是否模糊检索
order	string	''	结果排序规则
limit	number	0	结果数量限制
ignore	boolean	true	是否忽略大小写
hyphen	string	','	分隔符
nullHandle	'reset'/'clear'	'reset'	空值处理方式

高亮配置

属性	类型	默认值	说明
highlight.enable	boolean	false	是否启用高亮
highlight.props	string	'label'	高亮属性
highlight.node	string	'i'	高亮节点名
highlight.classes	string	'ax-c-issue'	高亮样式类

数据源配置

属性	类型	默认值	说明
content	string	''	数据源内容
contType	'text'/'async'/'html'/'auto'	'text'	内容类型
contData	object	{}	请求数据参数
ajax	object	{}	异步请求配置

编辑器配置

属性	类型	默认值	说明
editor	string	''	编辑器选择器
trigger	'input'/'change'/'blur'	'input'	触发事件类型
delay	number	200	输入节流时间(ms)
target	string	''	列表容器选择器

状态配置

属性	类型	默认值	说明
status.enable	boolean	false	是否显示状态
status.placement	'editor-top'/'editor-btm'/'list-top'/'list-btm'	'list-top'	状态栏位置

列表配置

属性	类型	默认值	说明
bullet.type	'checkboxes'/'radios'/'select-single'/'select-multi'/'custom'	'custom'	列表类型
bullet.childNode	string	'div'	子节点名称
bullet.paddingless	boolean	false	是否无内边距
bullet.hoverable	boolean	false	是否支持悬停
bullet.divisible	boolean	false	是否有分割线
bullet.multiline	boolean	false	是否多行显示
classes	string	''	列表样式类

模板配置

属性	类型	默认值	说明
tplStr	string	''	模板字符串
tplEng	function	null	模板引擎

等待函数

属性	类型	默认值	说明
b4Fill	function	null	填充前等待函数

回调函数

属性	类型	默认值	说明
onRendered	function	null	渲染完成回调
onSearched	function	null	搜索完成回调
onProcessed	function	null	数据处理回调
onUpdatedKeys	function	null	关键词更新回调
onRequest	function	null	请求完成回调
onUpdatedCont	function	null	内容更新回调