abcb
带有 范式搜索 和 高级搜索 的搜索组件
Last updated a year ago by zasqwhdh .
Original npm · Tarball · package.json
$ cnpm install abcb 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.2.0                                ...           latest (a year ago)

2 Versions

  • 0.2.0                                ...           a year ago
  • 0.1.4                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 1
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |