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