Блог

Главная - Вопросы по программированию - Функция быстрого поиска для таблицы

Функция быстрого поиска для таблицы

#javascript #reactjs

Вопрос:

Я создаю проект react, в котором я использую таблицу, и мне нужно добавить в нее функцию поиска. Прямо сейчас таблица заполнена объектами.

 function createData(Estimate, ServiceProvider, Vehicle, Date, Amount, Status, Action) {
    return {Estimate, ServiceProvider, Vehicle, Date, Amount, Status, Action};
}
const rows = [
    createData('#10001', "Euro Motors", "2010 Toyota Corolla CE FWD", "January 28, 2021", "$395.11", "Approved",),
    createData('#10002', "Auto Motors", "Some car model", "January 28, 2021", "$395.11", "Pending"),
    createData('#10003', "Some other Motors", "Some other car model", "January 28, 2021", "$395.11", "Approved"),
]
const [tableData, setTableData] = useState(rows)

Прямо сейчас у меня есть функция поиска только для поставщика услуг, использующего это

 const requestSearch = (searchedVal) => {
    const filteredRows = rows.filter((row) => {
        return row.ServiceProvider.toLowerCase().includes(searchedVal.toLowerCase());
    });
    setTableData(filteredRows);
};

но мне это нужно для Оценки, поставщика услуг, Транспортного средства. Как я могу расширить функциональность на все три, чтобы независимо от того, что пользователь ищет в строке поиска, он проверял все три столбца и отфильтровывал строки с повторением.

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

1. Просто добавьте условия для оценки и транспортного средства и объедините их с помощью || оператора в requestSearch функции.

2. @CharchitKapoor это также заботится о повторениях?

3. Репитиции в каком смысле? Каждая строка, соответствующая более чем одному критерию, появится только один раз.

4. @CharchitKapoor ваше решение хорошее. Не могли бы вы, пожалуйста, ответить на вопрос, чтобы я мог его принять

Ответ №1:

Просто добавьте условия для Estimate , и Vehicle и объедините их с помощью || оператора внутри requestSearch функции, вот так:

 return row.ServiceProvider.toLowerCase().includes(searchedVal.toLowerCase()) ||
 row.Estimate.toLowerCase().includes(searchedVal.toLowerCase()) ||
 row.Vehicle.toLowerCase().includes(searchedVal.toLowerCase())

Ответ №2:

Вы можете написать общее решение для всех ключей, фактически не упоминая ключи по отдельности. Попробуйте выполнить следующий фрагмент кода:

 const requestSearch = (searchedVal) => {
    const filteredRows = rows.filter((row) => {
        let found = Object.values(row).map(o => o.toLowerCase()).find(o => o.includes(searchedVal));
        if(found) return true; 
        else return false;
    });
    console.log(filteredRows);
};

Примечание: это будет работать, если все ваши значения поиска являются строковыми, для числа вам нужно будет добавить к нему некоторую условную обработку.

Метки: