поиск на основе опции меню выбора

Я новичок в JS React. У меня есть таблица, которая содержит номера телефонов группы людей. Вот кусок кода моей таблицы:

import React, { useState, useEffect } from 'react'
const Table = () => {
const navigate = useNavigate()
const [users, setUsers] = useState([]);
const [currentUsers, setCurrentUsers] = useState([]);
const [search, setSearch] = useState('');
useEffect(async () => {
try {
const response = await getUsers(search);
setUsers(response.data.users);
} catch (error) { }
}, [search]);
return (
<input type='text' placeholder='search..' onChange={(e) => setSearch(e.target.value)} value={search} />
<select aria-label=".form-select-sm example">
<option selected value="1">all</option>
<option value="2">name</option>
<option value="3">phone</option>
</select>
<table className='w-full border-separate rounded-md'>
<thead>
<tr className='bg-text-secondary text-white shadow-sm text-center'>
<th className='p-2'>name</th>
<th className='p-2'>phone</th>
</tr>
</thead>
<tbody>
{currentUsers.map((item, index) =>
<tr key={item.id} className={index % 2 === 0? 'bg-white shadow-sm text-center': 'bg-text bg-opacity-5 shadow-sm text-center'}>
<td className='text-text text-sm p-2'>{item.name}</td>
<td className='text-text text-sm p-2'>{item.phone}</td>
</tr>
)}
</tbody>
</table>
)
}


Вот определение getUsers:

export const getUsers = async (search) => {
const apiUrl = `${baseApiUrl}/users?search=${search}`;
const token = localStorage.getItem("token");
const response = await axios.get(apiUrl, {
headers: {
"content-type": "application/json",
Authorization: `Bearer ${token}`,
},
});
return response.data;
};


Как видите, внутри таблицы у меня есть поле для поиска. По умолчанию, когда я что-то ищу, он ищет все столбцы и их значения. Вот как возвращается список пользователей, когда я что-то ищу, и это реализовано в бэкэнде:

const usersList = async (req, res, next) => {
const { search } = req.query
try {
//filter users
const users = await userModel.find({
$or: [
{ name: { $regex: search } },
{ phone: { $regex: search } },
]
})
res.send({
success: true,
message: 'user list returned',
data: {
total_records: users.length,
users,
}
})
} catch (error) {
next(error)
}
}


Теперь я хочу иметь возможность искать определенные столбцы.

В итоге над таблицей я добавил меню выбора с тремя опциями:

all: search all columns (default behavior)
name: select *name* column
phone: select *phone* column


но я не могу понять, как я могу сделать так, чтобы, nameнапример, когда я выбираю опцию и пишу что-то в строке поиска, выполнялся поиск только в этом столбце. Является ли это возможным?

Решение проблемы

Кажется, вы не реализовали «поиск по столбцу» в своем бэкэнде. Вы должны отправить тип столбца вместе с ключевым словом в запросе запроса. И в вашем внутреннем коде

const { search, column } = req.query;


Затем обновите $or динамически.

const all = [
{ name: { $regex: search } },
{ phone: { $regex: search } },
];
const users = await userModel.find({
$or: column!= null? all.filter((item) => Object.keys(item)[0] === column): all,
})


Примечание: вы должны проверить, допустимо ли значение столбца в промежуточном программном обеспечении.