如何将搜索功能应用于具有可变子成员的 SectionList？答案

【问题标题】：How to apply Search functionality to a SectionList with variable child members?如何将搜索功能应用于具有可变子成员的 SectionList？
【发布时间】：2021-06-20 06:22:29
【问题描述】：

在这里，我提供了一个小列表来展示我获得的数据类型，有些列表非常大，包含多个部分和多个子对象。我在 SectionList 顶部有一个搜索框，列表只能根据搜索查询显示数据。列表必须实时排序。我尝试了一些解决方案，但主要问题似乎是过滤逻辑。欢迎任何帮助。提前致谢。

sectionData = 
[
    {
        "GroupName": "Otopulse", 
        "data": [
                    {
                        "CurrentSpeed": 0.01,
                        "LastUpdatedDate": "20 Jun, 2021",
                        "LastUpdatedTime": "08:29 AM",
                        "VehicleId": 1210,
                        "VehicleName": "AhmedGMC", 
                        "VehicleStatus": "PARKED", 
                        "VehicleType": "Car"
                    }
                ]
    }, 
    
    {
        "GroupName": "Unassigned", 
        "data": 
                [
                    {
                        "CurrentSpeed": 1,
                        "LastUpdatedDate": "19 Jun, 2021", 
                        "LastUpdatedTime": "03:35 PM",
                        "VehicleId": 1715, 
                        "VehicleName": "Khalil", 
                        "VehicleStatus": "OFFLINE", 
                        "VehicleType": "Car"
                    }, 
                    {
                        "CurrentSpeed": 1, 
                        "LastUpdatedDate": "29 Dec, 2020", 
                        "LastUpdatedTime": "09:57 AM",
                        "VehicleId": 1697, 
                        "VehicleName": "Nazir test", 
                        "VehicleStatus": "OFFLINE", 
                        "VehicleType": "Car"
                    }
                ]
    }       
]

【问题讨论】：

你可以使用 array.filter() 。

标签： react-native react-native-sectionlist

【解决方案1】：

此答案适用于希望在 React Native 中的 SectionList 上实现搜索/过滤功能的任何人。我使用了一个库：React Native Searchable List，see it here。这是一个相当容易实现的库。查看我的实现：请记下我上面问题声明中的部分数据

const [data, setData] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [searchAttribute, setSearchAttribute] = useState('VehicleName');
const [ignoreCase, setIgnoreCase] = useState(true);

<TextInput
    style={styles.searchInputBox}
    placeholder="Search"
    onChangeText={setSearchTerm}
    value={searchTerm}
/>

<SearchableSectionList
    ItemSeparatorComponent={FlatListItemSeparator}
    sections={data}
    searchTerm={searchTerm}
    searchAttribute={searchAttribute}
    searchByTitle={false}
    ignoreCase={ignoreCase}
    keyExtractor={(item, index) => item + index}
    renderItem={({item}) => <VehiclesListItem item={item} />}
    renderSectionHeader={({section: {GroupName}}) => (
      <View
        style={{
          backgroundColor: '#dadada',
          padding: 10,
        }}>
        <Text style={{color: '#2A2A2A', fontSize: 15}}>{GroupName}</Text>
      </View>
    )}
  />

谢谢，保重。快乐编码！

【讨论】：