abc-common-search-w v0.0.2

SearchInput 搜索(高级搜索)

带有 范式搜索 和 高级搜索 的搜索组件 

版本

0.0.4

ChangeLog

0.0.4

1. 在输入框输入内容后，按空格，把输入框内容当做 keyword 关键字的值，加入搜索结果中
2. 在输入框输入内容，出来范式搜索的选择框。这时可以使用上下选择范式列表中的项，选择一个后，按回车可以把选中的值，传入搜索结果中
3. 在搜索结果中，双击关键字值的部分，把当前结果中的值赋值到输入框中
4. bugfix

• 高级搜索 下拉框重叠
• 按回车执行搜索
• 搜索按钮按两下 才能搜索
• 检索不到关键字 不显示下拉列表
• 范式搜索回填到高级搜索 格式错误
• 高级搜索字体倾斜问题

样式

概览

范式搜索

高级搜索

结果

功能

• 范式搜索
• 高级搜索
• 搜索值回填
• 结果类型选择

使用时机

整体搜索及带有复合搜索的情况下 使用

依赖

外部依赖

内部依赖

使用方法

现阶段没有发布到内部npm上面 只能拿到单个文件 

需要引用两个文件 

引用方法

// 引用打包完的js文件
import { SearchInput } from './com.min.js'
// 引用打包完的 css文件
import './main.08355b8b.css'

在代码中使用

代码中使用

<SearchInput
 superOpt={opt} //高级搜索的不确定配置文件
 normalUri="uri" // 范式搜索的提示 uri地址 
 superUri="/resapi/search/exact/hint" // 高级搜索的提示 uri地址
 searchHandle={(t) => console.log('搜索的词', t)} // 点击搜索按钮的回调函数 
/>

参数

OPTION

superOpt

选项配置说明

// 接收数组类型的数据 
 
[
	{
		title: '发件人', // 输入框前面显示的文字
        placeholder: '请输入发件人姓名', // 输入框未输入时 显示的默认文字
        type: 'text', // 有两个选项 [text|select] [输入框|下拉选择框]
        key: 'from', // 选中项左边类型文字类型
        searchType: 'from', // 在高级搜索 查询备选项时，调用参数
        search: true, // 这个输入框 是否 调用接口
	}
]

normalUri

normalUri="/resapi/search/fuzzy/hint" // 范式搜索的 地址 因为要适配各个项目，所以内部安装了 axios工具

superUri

superUri="/resapi/search/exact/hint" // 高级搜索 备选地址 

searchHandle

searchHandle={(str) => console.log('搜索的词', str)}

typeList

['from', 'to', 'Keyword']

下个版本迭代

• 剥离 antd 依赖
• 更细致的交互操作