需要一个高级搜索过滤器 - React Native

Question

我有一个 SearchBar 和一个简单的 FlatList。我的搜索过滤器逻辑工作正常，但对于简单搜索来说没问题。

例子： 如果我的 FlatList 包含三个项目

1. 参观时间。
2. 他知道参观时间。
3. 访问和时间。

如果我在我的 SearchBar 中搜索 "visit h"，它只会呈现 item 2 -> 2。他知道参观时间。

我希望它在我搜索 “visit h”时呈现所有 3 个项目 我的搜索过滤器应该查找包括“访问”和“h”的每个项目。 “访问”中还应包括“访问”

如何捕获这种类型的过滤器？有没有可以使用的js库？执行此搜索过滤器的任何有效方法？

我当前的代码如下：

export default class HomeComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoading: true,
            notifications: [],
            query: '',
            temp: []
        }
    };

    componentDidMount() {
        fetch('https://140xya6a67.execute-api.ap-southeast-1.amazonaws.com/dev/', {
            method: 'GET',
        })
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    notifications: responseJson,
                    notificationRead: false,
                    temp: responseJson,
                })
            })
    };

    goToDetails() {
        return this.props.navigation.navigate(Details);
    }

    renderItem({item}) {
        return <NotificationItem item={item}
                    onPress={() => {this.goToDetails()}}/>
    }

    handleSearch(text) {
        const newData = _.filter(this.state.temp, (item) => {
            const itemData = item.Desc ? item.Desc.toUpperCase() : ''.toUpperCase();
            const textData = text.toUpperCase();
            return itemData.indexOf(textData) > -1;
        });
        this.setState({
            notifications: newData,
            query: text,
        });
    }

    renderContent() {
        let {notifications} = this.state;

        return (
            <View>
                <SearchBar placeholder='type here...' lightTheme round value={this.state.query}
                           onChangeText={(text) => {this.handleSearch(text)}}/>
                <FlatList
                    keyExtractor={(item, id) => item.id}
                    data={notifications}
                    renderItem={this.renderItem.bind(this)}
                />
            </View>
        );
    }

    render() {
        let {fill, container} = styles;

        return (
            <View style={[fill, container]}>
                {this.renderContent()}
            </View>
        );
    }
}

Answer 1

您正在描述全文搜索，甚至是模糊搜索。

如果您有一小部分静态数据，您可以在运行时使用 fuse.js 之类的库纯粹在前端进行。

对于动态数据，您需要一个后端来预先标记和准备数据。然后前端只发送用户输入的内容，并从后端获取搜索结果。

如果您使用像 PostgreSQL 或 MSSQL 这样的现代 RDBMS，您可以自己构建它。或者使用专门针对此问题构建的服务或工具，例如 algolia 或 Elasticsearch。

Answer 2

您可以编写自己的简单过滤器，如下所示（未测试）：

handleSearch(text) {
  if (!text || text.length === 0) {
    this.setState({
      notifications: this.state.temp,
      query: text,
    });
    return;
  }

  const newData = _.filter(this.state.temp, item => {
    const itemData = item.Desc ? item.Desc.toUpperCase() : ''.toUpperCase();
    const textParts = text.toUpperCase().split(' ');

    let shouldInclude = true;
    for (let i = 0; i < textParts.length; i++) {
      const part = textParts[i];
      shouldInclude = shouldInclude && (itemData.indexOf(part) > -1);

      if (!shouldInclude) {
        return false;
      }
    }
    return true;
  });
  this.setState({
    notifications: newData,
    query: text,
  });
}