Question

我有一个SearchBar和一个简单的FlatList。我的搜索过滤器逻辑工作正常，但对于简单的搜索就可以了。

例：如果我的FlatList有三个项目

参观时间。
他知道探视时间。
参观和小时。

如果我在搜索栏中搜索“访问h” ，它将仅呈现项目2 -> 2。他知道参观时间。

当我搜索“访问h” 时，我希望它呈现所有3个项目我的搜索过滤器应查找包含“访问”和“ h”的每个项目。

中还应在“ visiting”中包含“ visit”

如何捕获这种类型的过滤器？有没有可以使用的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

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

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,
  });
}

Answer 2

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

如果静态数据列表很小，则可以在运行时使用fuse.js之类的库在前端进行纯数据处理。

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

如果您使用PostgreSQL或MSSQL之类的现代RDBMS，则可以自己构建。或使用针对此问题的更有针对性的服务或工具，例如algolia或Elasticsearch。

需要高级搜索过滤器-React native

2 个答案: