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

import React from 'react'
import Search from 'google-search-for-react'
class Demo extends React.PureComponent {

  mockData = value =>
    Array(18).fill({ name: `${value} :随机数${Math.random()}` });
  onSearchHistory = value =>
    new Promise(resolve => resolve(this.mockData(`${value}历史数据`)));
  onSearch = value => new Promise(resolve => resolve(this.mockData(value)));
  onEnter = value => {
    console.log("searchword:" + value);
  };
  placeholder = open =>
    open
      ? "指标搜索：最多支持三个关键词搜索，以空格隔开"
      : "指标搜索 (微贷/财富/保险)";
  renderContent = options => {
    const { rows, highlight, searchWords, handleClose } = options;
    return rows.map((item, index) => {
      const text = highlight(searchWords, item.name);
      return (
        <li
          key={`${index}content_li`}
          onClick={() => {
            console.log(item.name);
            handleClose();
          }}
        >
          <div dangerouslySetInnerHTML={{ __html: text }} />
        </li>
      );
    });
  };
  render() {
    return (
      <div>
        <div style={{ width: "90%" }}>
          <Search
            anchor="right"
            placeholder={this.placeholder}
            onSearchHistory={this.onSearchHistory} // 历史搜索
            onSearch={this.onSearch} // 搜索查询
            onEnter={this.onEnter} // 回车键入
            renderContent={this.renderContent} // 渲染内容
            renderFooter={this.renderFooter}
          />
        </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