Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Incorporate search/autocomplete #15

Open
Thiousi opened this issue Apr 23, 2021 · 3 comments
Open

Feature request: Incorporate search/autocomplete #15

Thiousi opened this issue Apr 23, 2021 · 3 comments

Comments

@Thiousi
Copy link

Thiousi commented Apr 23, 2021

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

@ghost
Copy link

ghost commented Apr 30, 2021

Live search would fit in better imo

@Thiousi
Copy link
Author

Thiousi commented May 3, 2021

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

@paysnugtech
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants