Add unordered list to search results

functions.js

@@ -53,23 +53,37 @@ function displaySearchResults(json) {
 
     searchResults.innerText = "";
 
+    const ul = document.createElement('ul');
+
     json.forEach((news) => {
-        let child = createNewsChild(news);
+        const li = createNewsChild(news);
 
-        searchResults.appendChild(child);
+        ul.appendChild(li);
     });
 
+    console.log(ul);
+
+    searchResults.appendChild(ul);
+
     const display = json.length === 0 ? "none" : "block";;
     searchResults.style.display = display;
 }
 
 function createNewsChild(news) {
-    let a = document.createElement('a');
+    const li = document.createElement('li');
+    const a = document.createElement('a');
     
-    let textNode = document.createTextNode(news['title']);
+    const textNode = document.createTextNode(news['title']);
     a.appendChild(textNode);
 
-    return a;
+    const hrefAttr = document.createAttribute('href');
+    hrefAttr.value = '#';
+
+    a.setAttributeNode(hrefAttr);
+
+    li.appendChild(a);
+
+    return li;
 }
 
 function slideImage() {

php/Index.php

@@ -68,8 +68,7 @@ class Index extends Page {
                 <input id="search-input" name="search-input" type="search" placeholder="Search" />
                 <input id="search-button" type="button" value="" />
             </form>
-            <div id="search-results">
-            </div>
+            <div id="search-results"></div>
         </li>
         <li><img src="../img/share_icon.png" alt="" /></li>
         <li class="admin-button"><a href="Admin.php">Admin</a></li>

styles.css

@@ -121,6 +121,26 @@ a {
     border: 0.1rem solid white;
     border-radius: 0.1rem;
     max-width: 20rem;
+    padding: 0;
+    margin: 0;
+}
+
+#search-results > ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+#search-results > ul > li {
+    padding: 0.05rem;
+    margin: 0;
+}
+
+#search-results > ul > li > a {
+    display: block;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    background-color: blue;
 }
 
 .admin-button a {