Merge pull request #62 from sivaprasath2004/sivaprasath-issue-closes-40

[Feature] : Search result added

index.html

@@ -46,8 +46,9 @@
     <div class="search-box">
       <i class="uil uil-search search-icon"></i>
       <!-- Icon for search functionality within the search box. -->
-      <input type="text" placeholder="Search here..." />
+      <input type="text" id="searchResult" placeholder="Search here..." />
       <!-- Input field for search functionality. -->
+      <div class="searching_results"></div>
     </div>
   </nav>
 

script.js

@@ -1,11 +1,38 @@
+const data= [{ "place": 1, "name": "Steven A" },{ "place": 2, "name": "Raghav M" },{ "place": 3, "name": "Ryan Z" },{ "place": 4, "name": "Joseph R" },{ "place": 5, "name": "Muwaffaq I" },{ "place": 6, "name": "Joshua L" },{ "place": 7, "name": "Nick M" },{ "place": 8, "name": "Ravindra R" },{ "place": 9, "name": "Ricardo M" },{ "place": 10, "name": "Shubham R" },{ "place": 11, "name": "Flavio S" },{ "place": 12, "name": "Igor S" },{ "place": 13, "name": "Mycah H" },{ "place": 14, "name": "hemant d" },{ "place": 15, "name": "Santhosh S" },{ "place": 16, "name": "Joseph D" },{ "place": 17, "name": "Kevin C" },{ "place": 18, "name": "yasser m" },{ "place": 19, "name": "Miguel Ángel M" },{ "place": 20, "name": "Peter K" },{ "place": 21, "name": "Atikur R" },{ "place": 22, "name": "Matthew Y" },{ "place": 23, "name": "Anwar S" },{ "place": 24, "name": "Jake Y" },{ "place": 25, "name": "Lokesh R" },{ "place": 26, "name": "Christopher P" },{ "place": 27, "name": "Mingxin O" },{ "place": 28, "name": "August E" },{ "place": 29, "name": "Samsruti D" },{ "place": 30, "name": "Harsh V" },{ "place": 31, "name": "Keenan P" },{ "place": 32, "name": "Rouz A" },{ "place": 33, "name": "Ron R" },{ "place": 34, "name": "Sean O" },{ "place": 35, "name": "Michael D" },{ "place": 36, "name": "Devishree R" },{ "place": 37, "name": "Ali R" },{ "place": 38, "name": "Alvin A" },{ "place": 39, "name": "Arthur N" },{ "place": 40, "name": "Choulhyouc L" },{ "place": 41, "name": "Zeeshan H" },{ "place": 42, "name": "Goran Đ" },{ "place": 43, "name": "sovannarong k" },{ "place": 44, "name": "Luke M" },{ "place": 45, "name": "Chenzhe X" },{ "place": 46, "name": "Jae Hee L" },{ "place": 47, "name": "Jason P" },{ "place": 48, "name": "Sebastiano D" },{ "place": 49, "name": "Julia S" },{ "place": 50, "name": "Sana" }];
 const nav = document.querySelector(".nav"),
   searchIcon = document.querySelector("#searchIcon"),
   navOpenBtn = document.querySelector(".navOpenBtn"),
-  navCloseBtn = document.querySelector(".navCloseBtn");
-
+  navCloseBtn = document.querySelector(".navCloseBtn"),
+  searchResult=document.getElementById('searchResult'),
+  resultContainer=document.querySelector('.searching_results');
+
+searchResult.addEventListener('input',()=>{
+  if(searchResult.value.length===0){
+    resultContainer.style.display="none";
+   }
+  if (nav.classList.contains("openSearch") && searchResult.value.length>0){
+    resultContainer.style.display="flex";
+    let result=data.filter(item =>item.name.toLowerCase().includes(searchResult.value.toLowerCase()))
+    resultContainer.innerHTML = '';
+
+    result.forEach((item,index) => {
+        const div=document.createElement('div')
+        const p = document.createElement('p');
+        const span=document.createElement('span')
+        p.textContent = item.name;
+        span.textContent=item.place
+        div.appendChild(p)
+        div.appendChild(span)
+        resultContainer.appendChild(div);
+    });
+  }
+})
 searchIcon.addEventListener("click", () => {
   nav.classList.toggle("openSearch");
   nav.classList.remove("openNav");
+  if(searchResult.value.length===0){
+    resultContainer.style.display="none";
+   }
   if (nav.classList.contains("openSearch")) {
     return searchIcon.classList.replace("uil-search", "uil-times");
   }

styles.css

@@ -45,6 +45,10 @@
 }
 /* Global reset and setting default font family to Poppins. */
 
+body{
+  position: relative;
+}
+
 .nav {
   /* Styling for the navigation bar. */
   top: 0;
@@ -140,9 +144,34 @@ a {
   border-radius: 6px;
   background-color: #fff;
   padding: 0 15px 0 45px;
+  border-bottom-left-radius:0px ;
 }
 /* Styling for input field within search box. */
 
+
+/* searching Results */
+.nav.openSearch .searching_results{
+   position: absolute;
+   width: 25rem;
+   height: 20rem;
+   background-color: white;
+   margin: auto;
+   display: flex;
+   flex-direction: column;
+   overflow-y: scroll;
+   overflow-x: hidden;
+}
+/* searching Results */
+
+.nav.openSearch .searching_results div{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem;
+  border-bottom: 0.1rem solid;
+  align-items: center;
+}
+
 .nav .navOpenBtn,
 .nav .navCloseBtn {
   display: none;