Нужен фильтр расширенного поиска - React native - PullRequest
Новая
       23

Нужен фильтр расширенного поиска - React native

0 голосов
/ 19 апреля 2020

У меня есть панель поиска и простой FlatList. Моя логика c для фильтра поиска работает нормально, но это хорошо для простого поиска.

Пример: если в моем FlatList есть три элемента
1. Час посещения.
2. Он знал час посещения.
3. Посещение и час.

В моей панели поиска, если я ищу "посещение ч" , будет отображаться только item 2 -> 2. Он знал час посещения.

Я хочу, чтобы он отображал все 3 элемента при поиске "посещение ч" Мой фильтр поиска должен искать все элементы, включающие "посещение" и "час". Он также должен включать «визит» в «посещение»

Как я могу захватить этот тип фильтра? Есть ли какая-нибудь библиотека 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>
  );
  }


}

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020

Вы описываете полнотекстовый поиск или даже нечеткий поиск.

Если у вас есть небольшой список статических данных c, вы можете сделать это только во внешнем интерфейсе во время выполнения с помощью библиотеки, такой как fuse. js.

Для динамических данных c вам необходим бэкэнд для токенизации и предварительной подготовки данных. Затем внешний интерфейс просто отправляет набранные пользователем данные и получает результаты поиска из внутреннего интерфейса.

Вы можете создать его самостоятельно, если используете современные СУБД, такие как PostgreSQL или MS SQL. Или используйте службы или инструменты, более целенаправленно созданные для решения этой проблемы, например algolia или Elasticsearch .

0 голосов
/ 19 апреля 2020

Вы можете написать свой собственный простой фильтр, как показано ниже (не проверено): 

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