search bar properly working

mks2002 · Aug 27, 2023 · 63327d1 · 63327d1
1 parent 9d2aaa5
commit 63327d1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/db.sqlite3 b/db.sqlite3
diff --git a/static/css/hotellist_style.css b/static/css/hotellist_style.css
@@ -9,7 +9,7 @@
    border-right-color: transparent;
    border-radius: 0.9375rem;
    text-align: start;
-   height: 73vh;
+   height: 77vh;
    background-color: white;
    width: 30vw;
    position: relative;

diff --git a/templates/hotellist.html b/templates/hotellist.html
@@ -144,7 +144,7 @@ <h5 class="mb-5">
 
           <div class="search">
             <i class="fa fa-search"></i>
-            <input type="text" id="searchTxt" class="form-control"
+            <input type="search" id="searchTxt" class="form-control" 
               placeholder="Search your favourate hotel by name, city, state or cost/night">
             <button class="btn btn-primary">Search</button>
           </div>
@@ -155,7 +155,8 @@ <h5 class="mb-5">
     </div>
 
     <hr class="container-fluid mt-0 mb-5" />
-
+
+    <div class="row my-1" id="searchResults"></div>
 
     <div class="row m-0 " id="mylist">
       {% comment %} from here we start the card section ... {% endcomment %}
@@ -209,10 +210,8 @@ <h3 class="text-center mx-3">Sorry for that particular state we currently dont h
     </div>
 
 
-    <hr class="container-fluid" />
-
+    <hr class="container-fluid mt-2" />
 
-    <hr class="container mt-2" />
 
     <div class="container text-center pt-3">
       <div class="section-title my-2 text-center">
@@ -256,6 +255,7 @@ <h4>
         element.parentElement.style.display = "none";
       }
     })
+    // this function will count how many cards having display not none i.e. they are visible ...
     populate()
   })
 
@@ -265,22 +265,26 @@ <h4>
     let noteCards = document.getElementsByClassName('noteCard');
     let displayCount = 0;
 
+    let searchResults = document.getElementById('searchResults');
+
     Array.from(noteCards).forEach(function (element) {
       if (element.parentElement.style.display !== "none") {
         displayCount++;
       }
     });
+
     // this comment is print for frontend search .....
-    if (displayCount === 0) {
-      elem.innerHTML = '<h3 class="text-center">Sorry no such hotel is available...</h3>';
-      elem.style.display = 'block';
+    if (displayCount == 0) {
+      searchResults.innerHTML = '<h3 class="text-center w">Sorry no such hotel is available...</h3>';
+      searchResults.style.display = 'block';
+    }else{
+      searchResults.innerHTML='';
+      searchResults.style.display='none';
     }
 
 
   }
 
-
-
 </script>