abcb

SearchInput 搜索(高级搜索)

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

版本

0.0.4

ChangeLog

0.0.4

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

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

 

样式

概览

范式搜索

高级搜索

结果

功能

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

使用时机

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

依赖

 

外部依赖

依赖工具	基于版本	地址
React	> 16.2.0	https://reactjs.org/
React-Dom	> 16.2.0	https://reactjs.org/

内部依赖

依赖工具	基于版本	地址
dayjs	> 1.5.11	https://github.com/xx45/dayjs
axios	> 0.18.0	https://github.com/axios/axios
Ant Design	> 3.1.1	https://ant.design/

使用方法

现阶段没有发布到内部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)} // 点击搜索按钮的回调函数 
/>

参数

属性	说明	类型	默认值	是否必填
superOpt	高级搜索 排除固定的部分剩下的配置项	object	{}	true
normalUri	范式搜索的提示接口uri地址（不包含host地址）	string	''	true
superUri	高级搜索的提示接口uri地址（不包含host地址）	String	''	true
searchHandle	点击搜索的回调函数 函数有个参数是搜索字符串	function	(str)=>str	true
typeList	选中项 的左侧 标记 数组	array	['from', 'to', 'Keyword']	true
placeholder	输入框的placeholder	string	请输入搜索内容	true
btnText	搜索按钮文字	String	搜索	true

 

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 依赖
• 更细致的交互操作