score:0
you can do this sending the search type also in request and based on that search type you can give conditions.to do this:- first add one more state in your table component.
const [searchtype, setsearchtype] = usestate("1");
after change change select element to
<select aria-label=".form-select-sm example" value={searchtype} onchange={(event) => setsearchtype(event.target.value)}>
<option selected value="1">all</option>
<option value="2">name</option>
<option value="3">phone</option>
</select>
now in getusers method pass serachtype and after that send as querystring in url. based on searchtype get the data.
score:0
seems that you haven't implement the "search by column" in your back-end. you should send the column type along with the search keyword in your request query. and in your back-end code
const { search, column } = req.query;
then update the $or dynamically.
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,
})
note: you should validate if the column value is valid in a middleware.
Source: stackoverflow.com
Related Query
- search based on the option of the select menu
- I wanted to show the title on the drop down menu and when some one select an option and submit i wanted the year value should be submitted
- Why doesnt the variable secondMenu update on choosing an option from select menu using react?
- How search the option from select dropdown which search from first letter using antd?
- Why doesn't this select list render with the correct item selected based on the defaultValue
- ReactJS - trigger event even if the same option is selected from select dropdown
- How to change the Redux state based on an Electron menu click?
- How to generate a menu based on the files in the pages directory in Next.js
- Open the collapsible menu by default based on the id
- React-select sometimes doesn't display the options in the dropdown menu on async search
- How to disable the selection of an item when the first letter of the option is pressed in the Select component?
- Set the width of material UI select based on label size
- How to disable the menu button option in DataGrid MUI?
- How to update select items based on the selection from the first select items using react
- React, can't select the first option of <select>
- React - how to populate one select menu based on a value of another select menu using data from a local .json file
- React change state based on select option
- Search input as option in Material UI Select component
- How to add the input field inside the select option using ant design and react
- Update Select Option list based on other Select field selection ant design
- Select box and getting the option label
- How to change the background color of MUI Menu Popover of TextField with select property?
- How can I type html select element so event.target.value refers to the option value type?
- React select remove selected option on search
- How can I prevent material-ui Select options to be opened when clicking on particular area of the selected option
- React - How to select all checkboxes based on one without using the map function
- Add the selected option from one select to another select in ReactJs
- How to display two links based on the drop option selection?
- Render select option based on a API call in react
- Why arrow key navigation doesn't work (or focus) in Dropdown in React Select when the option is modified?
More Query from same tag
- Get KeyCode for button click reactjs
- React/Node Trouble sending ImageData to server
- Generalizing function to reuse with different elements
- How to href to particular component in react on some action
- How to display a value in my title attribute
- how to process Route 404page such as "/search/:searchText" in react-route-dom v6
- React Hooks : How to access custom attribute value?
- 'outerMap' is not defined no-undef
- NextJs nested dynamic routes based on API
- How to fill space between 3 points in circle?
- Reactjs, parent component, state and props
- How to pass data from AntD table to another component in React?
- React Bootstrap table doesn't show properly
- Calling props.myFunction() inside a function in react functional component
- MongoDB aggregation pipeline for dating / chat app
- Setting the background image of an element in React js to an image stored in a variable
- Node Version Trouble deploying React app onto GCP
- How can I change header color in different pages
- Diagnosing RangeError: Maximum call stack size exceeded in React KeyEscapeUtils
- React Country -> Province/State -> City selector?
- Moment Js Date Comparison
- Nesting relative routes with react-router
- How to display template literals inside template literal in HTML children property?
- NextJS next/image Failed to parse src with Strapi 4 and Graphql
- Material UI styles not working in component (warning: several instances of `@material-ui/styles`)
- why tooltip is not hide on mouseleave event in react?
- Context Api state is not changing
- How to declare a react js declare function?
- Why is my thunk not working in this fetch statement?
- React Route for NAVLINK Received TRUE for a non-boolean attribute