纯前端实现模糊搜索

纯前端实现模糊搜索

匆匆完成，待整理。。。

一、前置知识

模糊查询一般都是后台来做的，我们只需要调用接口，而且后台做这个是非常的方便，只需要写下 Mysql 语句，检索下数据库就行了。接下来我们使用纯前端来实现下，技术框架 React。

首先我们需要的数据格式如下：

data: [
    { 
        key: 6028.069991021317,
        areaCode: 6028.069991021317,
        areaName: "四川省",
        areaPinyin: "sichuansheng",
        presentState: "未完成"
    }
];

如何制造出这个假数据呢，我是通过 mockjs 来生成的，然后通过 pinyin 把中文专成英文，包的版本如下：

"mockjs": "1.1.0",
"pinyin": "2.9.1",

这时候我们书写 data.js 文件，来生成大量的假数据。以下是 data.js 的内容：

import Mock from "mockjs";
import pinyin from "pinyin";
const random = Mock.Random;

// 汉字转拼音
const han2pinyin = (han) => {
    return [].concat(...pinyin(han, {
        // 拼音不加音调
        style: pinyin.STYLE_NORMAL
    })).join("");
};

const data = new Array(100).fill(0).map(item => {
    const province = random.province();
    const number = random.integer(1000, 9999) + Math.random();
    return {
        key: number,
        areaCode: number,
        areaName: province,
        presentState: random.pick(["已完成", "未完成"]),
        areaPinyin: han2pinyin(province)
    };
});
export default data;

现在生成了大量数据，去配置下入口 index.js：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
import { createStore } from "redux";
import { Provider } from "react-redux";
import "antd/dist/antd.css";
import reducers from "./reducers";

const store = createStore(reducers);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

引入了 antd 和 简单配置了下 redux，在看下 reducers.js 文件，合并 reducers 用的：

import getForecastList from "./counterStore.js";
import { combineReducers } from "redux";
export default combineReducers({
  getForecastList
});

counterStore.js 一个纯函数：

export default (state = { getForecastList: [] }, action) => {
    if (action.type === "SAVEFORECASTLIST") {
        return {
            getForecastList: action.palyload
        };
    }
    return state;
};

在组件中使用：App.js

import { connect } from "react-redux";
import React, { Component } from "react";
import { Button, Space, Table, Input } from "antd";
import data from "./data";

class App extends Component {
    state = {
        aheadSearch: "",
        getForecastList: data
    };
    forecastSearch(EventName) {
        if (EventName !== "reset") {
            let aheadSearch = this.state.aheadSearch.trim();
            let getForecastList;
            if (this.props.getForecastList.length === 0) {
                this.props.saveForecastList(this.state.getForecastList);
                getForecastList = this.state.getForecastList;
            } else {
                getForecastList = this.props.getForecastList;
            }
            // 中英文搜索
            const isletter = /^[a-zA-Z]+$/.test(aheadSearch);
            if (isletter) {
                getForecastList = getForecastList.filter(({ areaPinyin }) =>
                    aheadSearch.length > areaPinyin.length
                        ? ((areaPinyin = new RegExp(areaPinyin, "gim")),
                            areaPinyin.test(aheadSearch))
                        : ((aheadSearch = new RegExp(aheadSearch, "gim")),
                            aheadSearch.test(areaPinyin))
                );
            } else {
                getForecastList = getForecastList.filter(({ areaName }) =>
                    aheadSearch.length > areaName.length
                        ? aheadSearch.includes(areaName)
                        : areaName.includes(aheadSearch)
                );
            }
            this.setState({ getForecastList });
        } else {
            this.setState({
                aheadSearch: "",
                getForecastList: this.props.getForecastList
            });
        }
    }
    handleChange(EventName, e) {
        if (e && e.target) {
            this.setState({
                [EventName]: e.target.value
            });
        } else {
            this.setState({
                [EventName]: e
            });
        }
    }
    getForecastCol() {
        const columns = [
            {
                title: "销区",
                dataIndex: "areaName",
                align: "center"
            },
            {
                title: "提报状态",
                dataIndex: "presentState",
                align: "center"
            }
        ];
        return columns;
    }
    render() {
        return (
            <div>
                <h1>中英文忽略大小写搜索🔍</h1>
                <Space>
                    销区：{" "}
                    <Input
                        value={this.state.aheadSearch}
                        onChange={this.handleChange.bind(this, "aheadSearch")}
                    />
                    <Button onClick={this.forecastSearch.bind(this, "search")}>
                        查询
          </Button>
                    <Button onClick={this.forecastSearch.bind(this, "reset")}>
                        重置
          </Button>
                </Space>
                <Table
                    columns={this.getForecastCol()}
                    dataSource={this.state.getForecastList}
                    scroll={{ y: 200 }}
                    order
                    pagination={false}
                />
            </div>
        );
    }
}

export default connect(
    ({ getForecastList: { getForecastList } }) => ({
        getForecastList: getForecastList
    }),
    dispatch => ({
        saveForecastList(list) {
            dispatch({ type: "SAVEFORECASTLIST", palyload: list });
        }
    })
)(App);

当前时间 Monday, July 20, 2020 02:08:24