Search view setup

src/html/search.html

@@ -1,5 +1,31 @@
 <div id="search-view">
   <div class="content container-fluid">
-    Search results here
+    <ldp-display 
+      id="search-results-members" 
+      data-src="<?php echo $sdn; ?>/members/" 
+      set-name="firstname, name-separator, lastname"
+      value-name-separator="&nbsp;"
+      data-fields="avatar, name"
+      widget-avatar="ldp-display-img"
+      search-fields="firstname, lastname"
+      next="member"
+    ></ldp-display>
+
+    <ldp-display 
+      id="search-results-projects" 
+      data-src="<?php echo $sdn; ?>/projects/"
+      data-fields="client, number, name" 
+      widget-client="ldp-display-client"
+      search-fields="number, name"
+      next="project"
+    ></ldp-display>
+
+    <ldp-display 
+      id="search-results-channels" 
+      data-src="<?php echo $sdn; ?>/channels/" 
+      data-fields="name, description" 
+      search-fields="name, description"
+      next="channel"
+    ></ldp-display>
   </div>
 </div>

src/js/hd-app.js

@@ -1,8 +1,9 @@
 document.addEventListener("DOMContentLoaded", function(event) {
   // Constants declaration
-  const navBar      = document.querySelector("#navbar");
-  const searchBar   = navBar.querySelector("#search-bar");
-  const searchView  = document.querySelector("#search-view");
+  const navBar        = document.querySelector("#navbar");
+  const searchBar     = navBar.querySelector("#search-bar");
+  const searchView    = document.querySelector("#search-view");
+  const searchInput   = searchBar.querySelector("#search-input");
 
 
   // Shortcuts
@@ -31,4 +32,12 @@ document.addEventListener("DOMContentLoaded", function(event) {
     navBar.classList.remove("search-mode");
     searchView.classList.remove("search-mode");
   }
+
+
+  // Synchronizes the search input with the <ldp-form>s 
+  searchInput.addEventListener("keyup", (e) => {
+    searchView.querySelectorAll("ldp-form input[type=text]").forEach((el) => {
+      el.value = searchInput.value;
+    });
+  });
 });

src/scss/_search.scss

@@ -12,4 +12,12 @@
   &.search-mode {
     display:  block;
   }
+
+  .content {
+    background-color:   white;
+
+    ldp-form {
+      display:    none;
+    }
+  }
 }