Above image shows the working mechanism this project
Welcome to this comprehensive tutorial where we'll explore the step-by-step process of building a dynamic search bar in React. Throughout this guide, we will delve into implementing conditional show/hide functionalities and enabling filtering capabilities within the search bar. To kick things off, let's initiate your project using 'npm create vite@latest'. Additionally, we'll be leveraging the 'react-icons' package to enhance the search bar's visual elements; installation is as simple as running 'npm i react-icons'.
Let's break down the project into two key sections:
1. Show and Hide Functionality of the Search Bar
2. Rendering Match Results Based on the Search Input
Section 1: Show and Hide Functionality:
- Create SearchBar component with input field and close icon. Import it to App.jsx.
- Initialize useState to track input in search's input field.[searchInput, setsearchInput]
- In App.jsx import search icon and other icons that you like to have.
- Initialize useState to track the display of search bar.[isSearch,setIsSearch]
- Assign setIsSearch to close and search icons to control hide and show of searchBar.
- You can use ternary operator like in tutorial or if else to dynamically render search bar and icons.
Section 2: Rendering Match Results:
- Initialize useState [filteredSearch, setFilteredSearch] of type array to render out a list of match results.
- Create a dummy data, usually data would come from your backend or third party api but for now you can create a dummy one and import it where you want to use it.
- Create a function to filter out result from your dummy data and set it to filteredSearch.
- handleSearch function : `handleSearch` performs a search operation on a list of `Users` (dummy data) based on a `searchInput` value. Let's break it down step by step:
1. **Function Trigger**: `const handleSearch = () => { ... }` defines a function called `handleSearch` using arrow function syntax (`() => { ... }`).
2. **Input Validation**: The first conditional statement (`if (searchInput !== "") { ... }`) ensures that the search is performed only if there's a value present in the `searchInput` variable.
This prevents unnecessary search operations when the input field is empty.
3. **Filtering Users**: Inside the conditional block, the code uses the `filter` method on an array of `Users`. It iterates through each `user` in the `Users` array.
4. **Search Criteria**: Within the `filter` method, it checks each `user` by transforming the user object's values into a single string using `Object.values(user).join("")`. This converts the user object into a string, allowing for a case-insensitive search.
5. **Case-Insensitive Search**: It then converts both the generated string and the `searchInput` string to lowercase using `.toLowerCase()` for a case-insensitive search.
6. **Matching Search Input**: The `.includes()` method is used to check if the lowercase concatenated string of a user's values includes the lowercase `searchInput`. If it does, the user is considered a match for the search.
7. **Filtered Results**: Users that match the search criteria are stored in a variable named `searched`.
8. **Setting State**: Finally, the `searched` array containing the filtered users is set as the state using the `setFilteredSearch` function. This allows the application to update its state.
- To run this function whenever searchInput change, use useEffect.
- You can use debouncing technique to helps in controlling the frequency of invoking the search function.
It ensures that the search operation only triggers after a short delay (400ms in this case) following the last change in the searchInput, thereby optimizing performance and avoiding unnecessary or rapid search calls during user input.
- Use map method on filteredSearch array to render list of matched result.
- Wrap in around by ternary operator as before to conditionally show, if searchInput is not empty.
Comments
Post a Comment