.

navbar.html

@@ -1,3 +1,10 @@
+<!--
+<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+-->
+<link rel="stylesheet" href="/css/autocomplete.css">
+<script src="/js/jqueryui.js"></script>
+
 <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100 border-end border-primary">
   <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
     <span class="fs-5 d-none d-sm-inline text-primary h3">INFRA REPORTS IT</span>
@@ -10,6 +17,10 @@
     <input class="form-check-input" type="checkbox" id="lightSwitch" />
   </div>
 
+  <div class="position-relative bottom-0 start-0 p-3">
+    <input type="text" id="searchServer" class="form-control" placeholder="Server Search..." style="font-size: 0.75rem !important">
+  </div>
+
   <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
     <li class="nav-item">
       <a href="/index.php" class="nav-link align-middle px-0">
@@ -105,7 +116,27 @@
     </li>
   </ul>
   <hr>
-  <br>
-  <br>
-
 </div>
+
+<script>
+  $(document).ready(function() {
+      $("#searchServer").autocomplete({
+          source: "/search_servers.php", 
+          minLength: 2,
+          appendTo: "body",
+          position: { my: "left top", at: "left bottom-10" },
+          select: function(event, ui) {
+            window.location.href = "/inventory/server-detail.php?s=" + encodeURIComponent(ui.item.value);
+          } 
+      });
+      $("#searchServer").keypress(function(event) {
+        if (event.which == 13) {
+            event.preventDefault();
+            var selectedServer = $(this).val().trim();
+            if (selectedServer !== "") {
+                window.location.href = "/inventory/server-detail.php?s=" + encodeURIComponent(selectedServer);
+            }
+        }
+      });
+  });
+  </script>