react-native-section-alphabet-list icon indicating copy to clipboard operation
react-native-section-alphabet-list copied to clipboard

Feature request: Incorporate search/autocomplete

Open Thiousi opened this issue 3 years ago • 3 comments

Hello, This may be a feature request that not a lot of people are interested in but I see your alphabet list as a great component for displaying a contact list and any other ordered long list. To that effect, I would love to see an integration with a searchable section list component made possible. Example: https://github.com/mrlaessig/react-native-autocomplete-input

Thiousi avatar Apr 23 '21 20:04 Thiousi

Live search would fit in better imo

ghost avatar Apr 30 '21 12:04 ghost

Agreed, I've implemented it in my own project using the search bar from react-native-elements and a simple filter function:

searchFilterFunction = (text) => {
    // Check if searched text is not blank
    if (text) {
      // Inserted text is not blank
      // Filter data source (this.state.words)
      // Update the filtered data source (this.state.filteredWords)
      const newData = this.state.words.filter(
        function (item) {
          const itemData = item.value
            ? item.value.toUpperCase()
            : ''.toUpperCase();
          const textData = text.toUpperCase();
          return itemData.indexOf(textData) > -1;
      });
      this.setState({filteredWords: newData});
      this.setState({search: text});
    } else {
      // Inserted text is blank
      // Update the filtered data source (this.state.filteredWords) with the master data source
      this.setState({filteredWords: this.state.words})
      this.setState({search: text});
    }
  };

Thiousi avatar May 03 '21 16:05 Thiousi

this will become very slow when you have huge data to display

paysnugtech avatar Dec 20 '23 11:12 paysnugtech