search Auto-Completion project

src/App.jsx

@@ -18,6 +18,7 @@ import LightDarkMode from "./pages/light-dark-mode/Light-dark-mode";
 import TabTest from "./pages/tree-view/custom-tabs/Tab-test";
 import { ModalPopup } from "./pages/CustomModalPopup/ModalPopup";
 import { GithubProfileFinder } from "./pages/GithubProfileFinder/GithubProfileFinder";
+import { SearchAutoComplete } from "./pages/SearchAutoComplete/SearchAutoComplete";
 
 function App() {
   return (
@@ -53,6 +54,8 @@ function App() {
           <Route path='modal-popup' element={<ModalPopup />} />
           {/* Github Profile Finder */}
           <Route path="github-profile-finder" element={<GithubProfileFinder />} />
+          {/* Search Auto-Complete */}
+          <Route path="search-auto-complete" element={<SearchAutoComplete />} />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />

src/data/projects.js

@@ -53,6 +53,11 @@ export const projects = [
     id: 11,
     name: 'Github Profile Finder',
     path: 'github-profile-finder',
+  },
+  {
+    id: 12,
+    name: 'Search Auto-Complete',
+    path: 'search-auto-complete'
   }
 ];
 

src/pages/SearchAutoComplete/SearchAutoComplete.jsx

@@ -0,0 +1,75 @@
+import { Input } from "@/components/ui/input";
+import { useEffect, useState } from "react";
+import { Suggesstions } from "./Suggesstions";
+
+export const SearchAutoComplete = () => {
+  const [loading, setLoading] = useState(false);
+  const [users, setUsers] = useState([]);
+  const [error, setError] = useState(null);
+  const [searchParam, setSearchParam] = useState(null);
+  const [showDropDown, setShowDropDown] = useState(false);
+  const [filteredUsers, setFilteredUsers] = useState([]);
+
+  function handleChange(event) {
+    const query = event.target.value.toLowerCase();
+    setSearchParam(query);
+
+    if (query.length > 1) {
+      const filteredData =
+        users && users.length
+          ? users.filter((item) => item.toLowerCase().indexOf(query) > -1)
+          : [];
+      setFilteredUsers(filteredData);
+      setShowDropDown(true);
+    } else {
+      setShowDropDown(false);
+    }
+  }
+  function handleClick(event) {
+    setShowDropDown(false)
+    setSearchParam(event.target.innerText)
+    setFilteredUsers([])
+  }
+
+  async function fetchListOfUsers() {
+    try {
+      setLoading(true);
+      const response = await fetch("https://dummyjson.com/users");
+      const data = await response.json();
+
+      console.log(data);
+      if (data && data.users && data.users.length) {
+        setLoading(false);
+        setUsers(data.users.map((userItem) => userItem.firstName));
+        setError(null);
+      }
+    } catch (error) {
+      setLoading(false);
+      console.log(error);
+      setError(error);
+    }
+  }
+
+  useEffect(() => {
+    fetchListOfUsers();
+  }, []);
+
+  console.log(users, filteredUsers);
+
+  return (
+    <div className="container flex flex-col justify-start items-center py-4 w-fit">
+      <Input
+        value={searchParam}
+        onChange={handleChange}
+        className="w-80 focus-visible:ring-0"
+        name="search"
+        placeholder="Search Users Here..."
+      />
+      {loading ? (
+        <div className="absolute w-screen h-screen flex justify-center items-center">
+          <div className="loader "></div>
+        </div>
+      ) : showDropDown && <Suggesstions handleClick={handleClick} data={filteredUsers} /> }
+    </div>
+  );
+};

src/pages/SearchAutoComplete/Suggesstions.jsx

@@ -0,0 +1,9 @@
+export const Suggesstions = ({ data, handleClick }) => {
+  return (
+    <ul className="w-full border-input border-[1px] border-t-0 px-4 py-2 empty:hidden flex flex-col gap-1">
+      {data && data.length
+        ? data.map((item, index) => <li className="text-sm cursor-pointer" key={index} onClick={handleClick}>{item}</li>)
+        : null}
+    </ul>
+  );
+};