google-search-for-react
English | 简体中文
A simple search components it's UI just like google search
Installation
npm i google-search-for-react --save
Usage
PureComponent Array18; ; ; { console; }; open ? "指标搜索:最多支持三个关键词搜索,以空格隔开" : "指标搜索 (微贷/财富/保险)"; { const rows highlight searchWords handleClose = options; return rows; }; { return <div> <div style= width: "90%" > <Search anchor="right" placeholder=thisplaceholder onSearchHistory=thisonSearchHistory // 历史搜索 onSearch=thisonSearch // 搜索查询 onEnter=thisonEnter // 回车键入 renderContent=thisrenderContent // 渲染内容 renderFooter=thisrenderFooter /> </div> </div> ; }
API
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
anchor | searchbar展开的方向 | String | 'right' |
placeholder | 必填,输入框底文 | String/Function:(isOpen)=>{} | |
onSearch | 搜索查询 | Function (searchWords)=> Promise | 无 |
onSearchHistory | 查询历史记录 | Function (searchWords)=> Promise | 无 |
onEnter | 搜索回车事件 | Function (searchWords)=>{} | 无 |
renderHeader | 自定义搜索结果面板的header | Function (rows)=>{} | 无 |
renderContent | 定义搜索结果面板的Content | Function ( {rows,highlight,searchWords,handleClose})=>{} | 无 |
renderFooter | 定义搜索结果面板的Footer | Function (rows)=>{} | 无 |
Feature
- Highlight Search:通过点击searchbar后,搜索框动态放大,占据视觉主体,从而突出搜索功能
- Intelligence Related:智能联想,补全用户想要的内容
- Recent Pages/Most Visted Pages:最近搜索的内容和热度最多的内容,帮助用户快速检索,增加用户粘性
- One Search , All Products:同一体系下,搜索的交互和体验一致,提供后端接口服务
- Search as a service:提供后端接口API,高效灵活,适配不同场景
reference
- google search