Блог

Главная - Вопросы по программированию - React-встроенная функция фильтра поиска Javascript

React-встроенная функция фильтра поиска Javascript

#javascript #arrays #react-native #search

#javascript #массивы #react-native #Поиск

Вопрос:

Я пытаюсь выполнить поиск этих ингредиентов в этом массиве и добавить значение к data , чтобы отобразить его, но это не работает. Я очень новичок в javascript, поэтому я был бы очень признателен, если кто-нибудь будет достаточно любезен, чтобы помочь мне.Это то, что я сделал:

 const Search = () => {
  const ingridients = [ ["paprika", "parsley"], ["steak", "ground beef"],["milk", "eggs", "cheese"] ]
  const [input, setInput] = useState();

  const categorize = (term) => {
    setInput(ter )
    let data = []
    if (term) {
      const newData = ingridients.filter(() => {
        if (RegExp(searchTerm, "gim").exec())
            return RegExp(searchTerm, "gim").exec()
      }) 
    } else {
      data = []
    }
  }
  return(
      <TextInput onChange={(text)=> categorize(text)} value={input}/>
  )
}

Комментарии:

1. вы 2d массив строк. почему не простой массив строк? можете ли вы добавить снимок экрана и объяснить, чего именно вы хотите достичь?

2. Я хочу, чтобы пользователь, например, искал паприку, и если я выполняю рендеринг data с помощью Flatlist, пользователь может видеть предложения по поиску, которые отображаются из функции ингредиентов

Ответ №1:

Вы имеете в виду что-то вроде этого?

 import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

export default function App() {
  const ingridients = [
    'paprika',
    'parsley',
    'steak',
    'ground beef',
    'milk',
    'eggs',
    'cheese',
  ];
  const [input, setInput] = useState();
  const [filteredData, setFilteredData] = useState([]);

  const filter = (term) => {
    setInput(term);
    if(/d/.test(term) || /[a-zA-Z]/.test(term)) {
        setFilteredData(ingridients.filter(ingridient => ingridient.includes(term)));
    } 
    else {
       setFilteredData([]);
    }
  };
  return (
    <React.Fragment>
      <TextInput
        onChangeText={(text) => filter(text)}
        value={input}
        style={{ backgroundColor: 'grey' }}
      />
      <View style={{ padding: 40 }}>
        {filteredData.map(ingridient => (
          <Text style={{ color: 'black' }}>{ingridient}</Text>
        ))}
      </View>
    </React.Fragment>
  );
}

Комментарии:

1. Большое вам спасибо за это!!!!!! как мне отредактировать это, чтобы показывать предложения только после ввода пользователем? Так что, например, если нет ввода, он не устанавливает данные, даже если я отступаю назад и ввода нет

2. Добро пожаловать. Я отредактировал функцию фильтра, чтобы она отображала значения только при вводе алфавита